VUE的watch深度监听

需求是动态添加表单项并计算金额以及总价,由于需要监听对象中的数组属性并计算金额,使用到了watch深度监听。刚使用vue不久,记录一下解决问题的过程,代码写得不是很好,见谅

效果图:在这里插入图片描述
js代码:

/*监听价格及数量变化,计算物品总价及采购总价*/
    watch:{
      'form.purchase_list':{
        handler:function(val,oldval){
          // console.log(val);
          let total_price=0;
          let total_amount=0;
          for (let i=0;i<val.length;i++){
            //总价计算并赋值
            total_price=val[i].goods_price*val[i].goods_qty;
            this.form.purchase_list[i].total_price=total_price;
            //总价计算并赋值
            total_amount+=total_price;
            this.total_amount=total_amount;
          }
        },
        deep:true//对象内部的属性监听,深度监听
      },
    },

data部分:

		total_amount:0,
        form: {
          goods_type:'',
          purchase_list:[{
            goods_name:'',
            goods_price:1,
            goods_qty:'',
            total_price:0,
          }],
          purchase_reason: '',
          approve_person:''
        },

可以看到,purchase_list的每一项是用户点击新增动态添加进去的,由于watch只能监听普通属性,所以这里添加deep:true开启深度监听,在指定的属性内的所有数据只要发生变化都会触发监听。监听写成对象形式,那么对象中的所有属性发生变化都会被监听,所以这里进行了优化,使用字符串的’form.purchase_list’监听对象中的某个属性,并循环计算数组中的数据,完成需求。

Logo

前往低代码交流专区

更多推荐