在最近的工作中，我遇到这样一个需求，给商品加规格信息，而这个规格信息是自定义的，在后端传给我时，时一个二维的对象数组，像下面这样，在后台是可以设置很多的规格信息的，规格里面又能设置很多数值，然后需要我在前端实现购买时对规格的选择。

spec_list=[
        {
           id: 1,
           name: '颜色'，
           list：[
               {id:11,value:'a'},
               {id:12,value:'b'},
               {id:13,value:'c'},
           ]
         },
         {
           id: 2,
           name: '尺寸'，
           list：[
               {id:21,value:'1'},
               {id:22,value:'2'},
               {id:23,value:'3'},
              ]
          }, 
    ]

一开始就觉得不就是循环嘛，简单v-for给我循环！

<view class="popup_goodsDesc—item" v-for="(item, indexOut) in goodsInfo.spec_list" :key="item.id">
     <view class="desc_name">{{ item.spec_name }} ：</view>
     <view class="desc_value">
         <view class="value-item" v-for="(e, itemIndex) in item.value_list" :key="e.id">
                {{ e.spec_value }}
          </view>
     </view>
</view>

渲染是渲染出来了，但是当我去写"active"点击样式时，突然发现没有效果，我检查了我的代码，我觉得应该没有什么问题吧，还给ai分析了一下，也没啥问题，就在我百思不得其解时，我才意识到这是一个二维数组，而且这个项目是一个vue2项目。它真的，我哭死！因为这是算我接手的项目，好像原项目中除了uni-ui没用其他ui组件库，所以我就想着自己想个办法来把效果实现出来。

嘿！还真被我搞出来了，虽略显拙劣，但也有点用处。叫后端大哥给每个list数组中的每个元素加了一个checked属性，然后用了map来对其点击的规格属性进行选中，

 <view class="popup_goodsDesc—item" v-for="(item, indexOut) in goodsInfo.spec_list" :key="item.id">
          <view class="desc_name">{{ item.spec_name }} ：</view>
          <view class="desc_value">
              <view class="value-item" v-for="(e, itemIndex) in item.value_list" :class="{ active: e.checked }" :key="e.id" @click="getValue(e.id, item.id)">
                {{ e.spec_value }}
              </view>
          </view>
     </view>
     
  getValue(inId, outId) {
      //this.infoList 就是那个后端给我的spec_list数据
      this.infoList.map((outItem, outIndex) => {
        //找到点击的外层id
        if (outItem.id === outId) {
             return outItem.value_list.map((item, index) => {
                 //再找到内层的id，相同则checked为true，不同则false，初始默认都是false
                if (item.id === inId) {
                  return (item.checked = true);
                } else {
                  return (item.checked = false);
                }
          });
        }
      });
    } 

选中效果，这样不同规格的选中不会互相干扰，每一个规格信息只能选中一个数值，这样就挺好。

over！完结

有个问题

其实我写完之后，在想，就是不用组件，不重写vue2对数组的监听的话，还有其他的方法实现吗？我觉得我的这个方法比较笨拙，哈哈哈哈哈！希望有大佬教教我这个刚工作不久的前端开发!

原文

链接：https://juejin.cn/post/7354733254535823386