vue之watch 深度监听(you may have an infinite update loop in a component render function)
formInline:{addr:'',ip:'',maskcode:'',routerlist:'',dymaicitems:[{...
·
formInline:{
addr:'',
ip:'',
maskcode:'',
routerlist:'',
dymaicitems:[
{ripaddr:'',rmaskcode:'',rgateway:'',status:1,index:1}
]
},
有这些一个需求,当我们删除一行的时候,我们不通过删除dymaicitems的元素,而是将对应每一项status设为‘0’,当dymaicitems每一项的status都为0的时候,我们将dymicitems清空。
vue的watch可以监听数据的变化,但watch默认只能监听formInline的变化,要想监听formInline里面的数据变化,我们可以用watch的深度监听
watch: {
'formInline.dymaicitems':{
handler:function(){
for (let item = 0; item < this.formInline.dymaicitems.length ; item++){
this.flag = "1";
if (this.formInline.dymaicitems[item].status=='1') this.flag = "2";
for (let x = 0; x < this.formInline.dymaicitems.length ; x++){
if(this.formInline.dymaicitems[x].status=='1'){
this.flag = "2";
}
}
}
if (this.flag=="1") {
this.formInline.dymaicitems = [];
this.flag = "2";
}
},
deep:true //深度监听
}
}
这地方关键点,我们要把flag抽取出来放到data里面定义,否则vue深度监听会一直遍历formInline里面的内容,抛出这样的错误:you may have an infinite update loop in a component render function
更多推荐
已为社区贡献8条内容
所有评论(0)