使用vue实现多规格选择实例(SKU)

2020-06-12 21:15:59易采站长站整理

"stock": "48",
"difference": "100,绿色"
},
{
"id": "24",
"price": "500.00",
"stock": "40",
"difference": "200,绿色"
},
{
"id": "25",
"price": "90.00",
"stock": "0",
"difference": "100,蓝色"
},
{
"id": "26",
"price": "40.00",
"stock": "20",
"difference": "200,蓝色"
}
],
"specifications": [
{ //这里是要被渲染字段
"name": "尺寸",
"item": [
{
"name": "100",
},
{
"name": "200",
}
] },
{
"name": "颜色",
"item": [
{
"name": "白色",
},
{
"name": "蓝色",
},
{
"name": "黑色",
},
{
"name": "绿色",
}
] }
] },
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是单规格,所以这里定义数组来判断
price:'' //选中规格的价钱
}
},
methods: {
specificationBtn: function (item, n, event, index) {
var self = this;
if (self.selectArr[n] != item) {
self.selectArr[n] = item;
self.subIndex[n] = index;
} else {
self.selectArr[n] = "";
self.subIndex[n] = -1; //去掉选中的颜色
}
self.checkItem();
},
checkItem: function () {
var self = this;
var option = self.simulatedDATA.specifications;
var result = []; //定义数组储存被选中的值
for(var i in option){
result[i] = self.selectArr[i] ? self.selectArr[i] : '';
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].item) {
result[i] = option[i].item[k].name; //赋值,存在直接覆盖,不存在往里面添加name值
option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原,目的是记录点下去那个值,避免下一次执行循环时被覆盖