element-ui中v-model值改变了，界面显示未变，什么问题？

Question

使用vue+element开始时，v-model绑定一个对象属性到select元素值，切换select选项时，绑定的对象值改变了，但是界面显示没有变，还是原来的值所对应的选项名称；

<template>
    <div class="bg-hks-container">
        <div class="bg-hks-conditionbox">
            <el-row :gutter="10">
                <el-col 
                  class="bg-hks-condition-col"
                  :xs="24" :sm="12" :md="8" :lg="6" :xl="4" 
                  v-for="item in conditionitems"
                  :key="item.property"
                  >
                    <div class="bg-hks-condition-itembox">
                        <div class="bg-hks-condition-itemname">{{item.name}}：</div>
                        <el-date-picker
                          size="mini"
                          :placeholder="item.placeholder"
                          :type="item.type"
                          v-model="conditions[item.property]"
                          v-if="item.type==='date'||item.type==='datetime'"
                        >
                        </el-date-picker>   
                        <el-input
                          size="mini"
                          :placeholder="item.placeholder"
                          :type="item.type"
                          v-model="conditions[item.property]"
                          v-if="item.type==='text'"
                        >
                        </el-input>
                        <el-select
                          size="mini"
                          :placeholder="item.placeholder"
                          :type="item.type"
                          v-model="conditions[item.property]"
                          v-if="item.type==='select'"
                        >
                            <el-option
                               v-for="opt in item.options"
                               :key="opt.value"
                               :label="opt.name"
                               :value="opt.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
        </div>
        <table id="dataTable"></table>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                apis:{},
                conditions:{},
                conditionitems:[]
            }
        },
        created(){
            this.initDataForCreate();
        },
        methods:{
            initDataForCreate(){
                this.apis = this.$store.state.apis;
                this.initCondition();
            },
            initCondition(){
                if(this.apis&&this.apis.hotkeycondition){
                    this.$http.get(this.apis.hotkeycondition)
                    .then(response=>{
                        if(response&&response.data){
                            this.conditionitems = response.data;
                        }else{
                            throw '获取条件ITEM失败！';
                        }
                    })
                    .catch(error=>{
                        console.error(error);
                    });
                }else{
                    console.error('获取接口配置失败！')
                }
            }
        },
        watch:{
            conditionitems(){
                if(this.conditionitems.length>0){
                    this.conditionitems.forEach(item=>{
                        this.conditions[item.property] = item.default;
                        if(item.type==='date'||item.type==='datetime'){
                            let date = new Date(item.default);
                            this.conditions[item.property] = date.toString()==='Invalid Date'
                                                           ? new Date()
                                                           : date;
                        }
                    })
                }
            }
        }
    }
</script>
<style lang="less" scoped>

Answer 1

vue2.x（Object.definePropertype()）监听不到对象中值得变化，Vue3.X已经从底层（proxy）重新设计了数据监听原理，是可以监听到任意值得变化，对于这种问题，解决方法如下

1. v-model="xxx",而不要v-model="xxx.xxx"
2. 使用升级Vue3 build version,公司项目谨慎升级，个人demo随意
3. 还是使用现有的v-model="xxx.xxx",赋值的使用请使用this.$set(xxx, 'attr', value);

如果以上还不可以，

1. 请仔细检查data中是否有定义，比如模板中 v-model="obj.timeStart"

而在data中只写了外层obj={},建议补充完整，即obj = { timeStart: '' };

1. 看看你的生命周期从beforeCreate到mounted之间有没有执行把v-model的值置空的操作。

希望能够帮到你

Answer 2

我记得好像select的model要和option的value值还是label值一致，具体哪个不记得了，你试试

Answer 3

我也遇到这问题 你解决了没 ？

Answer 4

我后面改用了iView