vue实现商品规格选择功能
时间：2023-02-20 09:46:13|栏目：vue|点击： 次
本文实例为大家分享了vue实现商品规格选择的具体代码，供大家参考，具体内容如下
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构
dataInfo: {
attr: [
{
attr_name: "码数",
attr_value: [{attr: "40"}, {attr: "50"}],
attr_values: ["40", "50"],
},
{
attr_name: "颜色",
attr_value: [{attr: "红色"}, {attr: "蓝色"}],
attr_values: ["红色", "蓝色"],
},
],
sku: [
{
sku: "40,红色",
stock: 100,
price: "4038.08"
},
{
sku: "50,红色",
stock: 100,
price: "4038.08"
},
{
sku: "40,蓝色",
stock: 100,
price: "4038.08"
},
{
sku: "50,蓝色",
stock: 100,
price: "4038.08"
},
],
stock: 326,
price: "4038.08",
},
首先先根据数据结构，将商品信息渲染到页面上
<div
class="product-delcom"
v-for="(ProductItem, n) in dataInfo.attr"
:key="n"
>
<p>{{ ProductItem.attr_name }}</p>
<ul class="product-footerlist clearfix">
<li
v-for="(oItem, index) in ProductItem.attr_value"
:key="index"
@click="specificationBtn(oItem.attr, n, $event, index)"
:class="[
oItem.isShow ? '' : 'noneActive',
subIndex[n] == index ? 'productActive' : '',
]"
>
{{ oItem.attr }}
</li>
</ul>
</div>
然后通过点击规格将规格字符串在sku数组里遍历，找到对应的库存；并判断哪些库存为0，如果为0，则选项设为不可选，首次进入页面的时候也需要调用该方法，将缺货的规格也一并设置为不可选。
