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

遇到了这个解决了，所以记录一下：

1.Vue.js

2.https://www.iviewui.com/components/select

 

完成vue.js下拉框选择绑定与取值，实现效果图如下：

 

 

template代码

 

<template>

    <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>


</template>

 

js代码

 

<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>

 

上述代码中this.formItem.sendValue获取我们最终选中的值，可以做其他的操作了。