elementUI+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’监听对象中的某个属性，并循环计算数组中的数据，完成需求。