Vue.js下拉框绑定和取值Select--Option >

站长苏飞

Vue.js下拉框绑定和取值Select--Option >

html代码如下

[HTML] 纯文本查看 复制代码

 <div>
        <Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80">
 
      
 
            <FormItem label="完成状态 : " prop="sendValue">
                <Select style="width:200px" v-model="formItem.sendValue">
                    <Option v-for="item in formItem.stateList" :value="item.value" :key="item.value" name="sendValue">{{
                        item.label }}
                    </Option>
                </Select>
            </FormItem>
        
        </Form>
    </div>

js部分代码如下

[JavaScript] 纯文本查看 复制代码

<script type="text/ecmascript-6">
    export default {
        mounted() {
            this.getData();
        },
        methods: {
 
            /**
             * 提交数据
             * @param name
             */
            submit(name) {
 
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let temp = {};
                        var url = this.ServerIp + this.API.editDemand + "/d_id/" + this.$route.query.d_id;
                        var that = this;
                        var params = {};
                        params.d_create_user = this.formItem.d_create_user;
                        params.d_progress = this.formItem.d_progress,
                            params.d_status = this.formItem.sendValue,
                            params.edit = 1;
                        this.modal_loading = true;
                        console.log(params.de_enclosure);
                        this.$http({
                            method: 'post',
                            url: url,
                            data: params,
                        }).then((res) => {
                            this.modal_loading = false;
 
                            if (res.data.success) {
                                that.$Message.success('需求编辑成功');
                                this.$refs[name].resetFields();
                                //路由跳转
                                // this.$router.push({path: '/forumCategoryList'});
                            } else {
                                that.$Message.error(res.data.result);
                            }
 
 
                        });
 
                    }
 
 
                });
 
 
            },
 
 
        data() {
            return {
             
                modal_loading: false,
                questionImageIsShow: false,
                formItem: {
                    d_title: "",
                    u_phone: "",
 
                    stateList: [
                        {
                            value: '0',
                            label: '待分配'
                        },
                        {
                            value: '1',
                            label: '开发中'
                        },
                        {
                            value: '2',
                            label: '已完成'
                        },
                        {
                            value: '3',
                            label: '停用'
                        },
                        {
                            value: '4',
                            label: '已变更'
                        }
                    ]
                
            
 
        }
    }
</script>

站长苏飞

效果如下

站长苏飞

https://cn.vuejs.org/

惜

强烈支持楼主ing……

Amy

强烈支持楼主ing……

竹林风

我只是路过打酱油的。