前端多规格商品选择属性匹配问题

https://blog.csdn.net/m0_43599959/article/details/120847593

感谢以上博主，但是没做初始化，再根据对应的版本依次调用一下匹配的方法就好了。

  if (this.product.skuEnabled) {//是否是多规格商品
              this.product.skuAttrList.forEach((item,itemindex)=>{//根据后端返回的规格
              item.productAttrValueList.forEach((items,index)=>{
                for(var i=0;i<this.productSkulist.length;i++){
              if(this.product.skuList[0].skuAttrValueList[i].skuAttrValue==items.skuAttrValue){
              this.specificationBtn(this.product.skuList[0].skuAttrValueList[i].skuAttrValue,itemindex,index)
               //请求商品数据时初始化选中默认规格
              }
                     }
                  })
          })
          }

   specificationBtn(specName, specIndex, specItemIndex) {
      if (this.selectArr[specIndex] != specName) {
        //判断所选规格数组中是否包含当前点击规格
        this.selectArr[specIndex] = specName; //如果没有则把当前规格添加
        this.subIndex[specIndex] = specItemIndex; //添加选中样式
      } else {
        // this.selectArr[specIndex] = "";
        // this.subIndex[specIndex] = -1; //去除样式
      }
      this.specShowString = this.spaceRemoveArr(this.selectArr).join(";") || "选择规格"; //所选规格页面中展示，数组为空则变为选择规格
      this.inventoryLookup(); //当规格选完后，去匹配
    },

   inventoryLookup() {
    try {
        this.product.skuList.forEach((item, index) => {
          let specShowStringCopyitem=''
          item.skuAttrValueList.forEach((skuitem, index) => {
             specShowStringCopyitem += skuitem.skuAttrValue + ";";
          });
          specShowStringCopyitem =  specShowStringCopyitem.slice(0, specShowStringCopyitem.length-1);
         if(this.specShowString==specShowStringCopyitem){
           this.productSku=item//匹配完成之后选中该规格
         }
        });
      } catch (e) {}
      // }
  
    },

以上业务场景是这样的：后台给我返回多规格商品，一个商品有多个规格，前端指定第一个规格为默认规格并初始化选中。

数据格式是：（productAttrValueList指的是该商品有几个规格属性；skuAttrList为该商品对应的规格版本，（例如某商品某一规格版本颜色为白，版本是mini等））

实现的图片：