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>