Vue v-for 数组对象更新,视图不更新

在这里插入图片描述
Vue v-for 数组对象更新,视图不更新_第1张图片
Vue v-for 数组对象更新,视图不更新_第2张图片
Vue v-for 数组对象更新,视图不更新_第3张图片
定义监听方法,值变更后会更新视图

 watch: {
        outsVehicleMaterielExpensesList() {
            this.forms.outsVehicleMaterielExpensesList.forEach((value, index) => {
                this.$set(this.forms.outsVehicleMaterielExpensesList, index, value);
            })
        }
    },

注意:
1、使用 this.forms.outsVehicleMaterielExpensesList = obj;监听失效;
2、直接监听数组,js抛出可能存在循环错误;
修改为:

在这里插入图片描述
Vue v-for 数组对象更新,视图不更新_第4张图片
在这里插入图片描述
在这里插入图片描述
Vue v-for 数组对象更新,视图不更新_第5张图片
在这里插入图片描述

Vue v-for 数组对象更新,视图不更新_第6张图片
重新定义一个对象,watch时只对那个list做 push和splice操作,不覆盖对象信息,watch就能监听数组和数组中属性变化,并更新视图信息;
延伸:对象属性更新,视图不更新
Vue v-for 数组对象更新,视图不更新_第7张图片
注意:
使用监听,页面会一卡一卡的,尽可能对下拉框和单选框做watch,输入watch会存在卡顿现象。
后面优化:
可以直接先定义对象,查询是直接复制对象属性,不直接复制属性,list只做push,不直接=,是可以刷新视图的,不用watch,类似于JAVA的引用地址,如果直接等于,地址变更,导致视图不能做绑定,如果只是属性变更或者素组添加和删除数组中某个对象,它的地址不会变更,可以刷新视图。
Vue v-for 数组对象更新,视图不更新_第8张图片
Vue v-for 数组对象更新,视图不更新_第9张图片
总计:
1、普通对象,保留视图里面的属性就可以了,只对值做变更;
2、数组,遍历使用push就可以了

你可能感兴趣的:(所遇问题,vue)