vue一次监听对象里的多个属性（可用于多个文本框输入值后的计算求和）

最新推荐文章于 2024-07-19 15:53:40 发布

原创最新推荐文章于 2024-07-19 15:53:40 发布 · 703 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码段展示了一个Vue.js组件，用于管理案件详情中的律师费用。它监听并计算attorneyFee、attorneyCourtFee、attorneySurveyFee和attorneyOtherFee四个属性的总和，更新attorneyAllFee字段。计算过程在`calculateSum`方法中执行，同时使用深度监听确保费用变化时能及时更新总和。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data:{
	caseDetailInfo: {
		attorneyFee:"",
		attorneyCourtFee:"",
		attorneySurveyFee :"",
		attorneyOtherFee:"",
		other:[],
	}
},
watch:{
// 监听对象caseDetailInfo里的四个属性（计算总费用）
    countSum() {
      const { attorneyFee, attorneyCourtFee, attorneySurveyFee ,attorneyOtherFee} = this.caseDetailInfo;
      return {
        attorneyFee,
        attorneyCourtFee,
        attorneySurveyFee,
        attorneyOtherFee
      };
    }
},
computed:{
	countSum: {
	      deep: true,  // 深度监听
	      handler(newVal,oldVal) {
	         this.calculateSum();
	      }
	    }
},
methods: {
// 计算总费用
    calculateSum(){
      console.log(11);
   	  this.caseDetailInfo.attorneyAllFee=Number(this.caseDetailInfo.attorneyFee)+Number(this.caseDetailInfo.attorneyCourtFee)+Number(this.caseDetailInfo.attorneySurveyFee)+Number(this.caseDetailInfo.attorneyOtherFee);
    },
}