Vue实现价格实时计算

需求分析

商品有附加选购，需对多个附加选项价格进行实时勾选计算

使用属性

vue的computed 属性，computed 相较watch属性性能更优，watch属性多用于监听路由，况且computed 属性有名字给你叫‘计算’属性，当然是用来计算的。

后台返回数据格式

多选列表数据

checkBoxList:[
	{
	productName:'apple',
	price:100，
	id:1
	},
	{
	productName:'banana',
	price:90,
	id:2
	},
	{
	productName:'orange',
	price:20,
	id:3
	},
]

使用cube-UI框架的CheckboxGroup 复选框组 会返回一个你勾选的id数组,如（选择了’apple’和‘banana’则返回[1,2]）
我们使用checkedArr保存这个勾选了的数组

checkedArr:[1,2]

思路

只要通过id把选中的数组过滤出来，再对数组的price相加即可

reslut:[
	{
	productName:'apple',
	price:100，
	id:1
	},
	{
	productName:'banana',
	price:90,
	id:2
	},
	]

一开始我想用js filter()方法把数组过滤，使用后发现数据格式不对，查了下资料需要使用find()方法替代，再使用map()把价格取出来到一个数组内（[100,90]），通过eval()计算数组求和

1. 在computed属性里面添加一个计算方法 calculatePrice:

computed:{
	calculatePrice(){
		let _self = this;
		let total; //最终价格
		let result = [];  //通过勾选ID过滤后的数组
		for(let i =0;i<_self.checkedArr;i++){
			result.push(_self.checkBoxList.find(item =>item.id === _self.checkedArr[i]))
		}
		total = eval(result.map((item) => item.price).join('+'));
		return total
	}
}

勾选不同选项价格实时变化

{
   
   {calculatePrice}}

参考

https://blog.csdn.net/weixin_42292748/article/details/83141665