v-model绑定对象检测不到属性变化?

v-model绑定

v-model大家都知道绑定的是数据源,可以把数据的变化更新到页面上,但是昨天我却遇到了这个问题。看代码

 

         
                    
                           
                     
         
 

export default {
	data() {
		selectValue: {}
	},
	computed: {
        ...mapGetters(['country'])
    },
	methods: {
        fetch() {
            this.requestLoading = true;
            getInfo({})
                .then(res => {
                    const {state, msg, result} = res.data;
                    if (state) {
                        this.formData.list = result;
                        this.formData.list.idType1 = this.formData.list.idType === 1 ? '个人' : '公司';
                        this.selectValue = {code: this.formData.list.telArea, id: this.formData.list.telCountryCode};
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(err => {
                    this.$message({message: err.message, type: 'error'});
                })
                .finally(() => {
                    this.requestLoading = false;
                });
        },
    }
}

此时是对的,但是如果把fetch方法中==this.selectValue = {code: this.formData.list.telArea, id: this.formData.list.telCountryCode};==改成this.selectValue.code = this.formData.list.telArea;
this.selectValue.id = this.formData.list.telCountryCode;

看似这样的变化不会对页面造成影响,但是就会出现这样的不好效果,页面刷新第一次的时候,打印selectValue中有值id,code存在,并且页面会显示,但是当切换到其他页面再切换回来时,打印selectValue中有值id,code依然存在,但是页面下拉框默认值显示为空。

出现这个原因首先是因为又页面的computed计算属性导致country发生变化时会重新获取country的值,因为country是存放在store里面,相当于一个变量,当页面刷新或重载时,这个也会重新赋值,而下拉框中默认值的选择是根据后台返回的数据的id也就是this.formData.list.telCountryCode 与country中每个对象中的id进行匹配而获得的结果,所以当country发生变化时,也会导致selectValue变化。

但是v-model绑定的时候是绑定的selectValue这个对象,并不是对象里面的属性,而改成上面那个this.selectValue.code = this.formData.list.telArea;
this.selectValue.id = this.formData.list.telCountryCode;只是对对象的属性进行操作,vue优化的很好,你页面上并没有对selectValue的属性进行绑定,所以就不会检测属性的变化,而达到性能的优化。

如果把v-model改成 v-model=”selectValue.id“; v-model=”selectValue.code“那么这样就能够检测到属性的变化,所以每次重新获取值应当对整个对象进行重新赋值,而不是仅仅是操作里面的属性。

才尝试写,里面有非常多的问题,欢迎大家提出,本人将会非常感激。

你可能感兴趣的:(Vue)