vue監聽數組中某個屬性，計算其他屬性問題

 

今天在項目開發中遇到一個根據數組中某個屬性變化同時更新另一個屬性變化的問題，剛開始代碼如下

this.weekList1=r.data.roomProducts; 

this.weekList1.map(item=>{
  item.cus_price='';
  item.cus_plaPrice='';
  item.cus_addPrice='';
});

watch:{

weekList1:{

handler:function(newVal,oldval){
  let self=this;
    newVal.map(item=>{
          if(this.hotelPriceRules.type=='0'){

            item.cus_plaPrice=Number(item.cus_price)+Number((Math.ceil(self.hotelPriceRules.val)/100))*Number(item.cus_price);
            item.cus_addPrice=Number(item.cus_plaPrice)- Number(item.cus_price)
          }else if(this.hotelPriceRules.type=='1'){
            var jianGeDate='';
            var startTime=item.cus_time.split(',')[0];
            var endTime=item.cus_time.split(',')[1];
            jianGeDate=this.getDateDiff(startTime,endTime);
            item.cus_plaPrice=Number(item.cus_price)+Number(jianGeDate)*Number(this.hotelPriceRules.val);
            item.cus_addPrice=Number(item.cus_plaPrice)-Number(item.cus_price)
          }
        })
    },
    deep:true
  },
},



當你輸入item.cus_price時監聽的數組 watch weekList1方法並沒有執行，因為在cus_price並沒有加入到監聽中，所以最簡單的解決辦法先整合好要監聽的數組，再賦值

r.data.roomProducts.map(item=>{
  item.cus_price='';
  item.cus_plaPrice='';
  item.cus_addPrice='';

});

this.weekList1=r.data.roomProducts;