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

Logo

前往低代码交流专区

更多推荐