需求分析
商品有附加选购,需对多个附加选项价格进行实时勾选计算
使用属性
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()计算数组求和
- 在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