数据格式如下

arr1 = [ "规格", "重量" ]
arr2 =  [ { "规格": "7号", "重量": "10斤" }, { "规格": "5号", "重量": "8斤" }, { "规格": "7号", "重量": "9斤" } ]

用v-for循环两次

<div v-for="(s, index) in arr1" :key="index">
     <div v-for="(i, index2) in arr2" :key="index">
             {{i[s]}}
     </div>
</div>

如有重复想要去重,比如我上面的规格,如果不做处理直接渲染出来,会渲染出来两个7号,这明显不是我想要的,所以要多写一个方法做去重处理,然后用这个方法来v-for

specFilter (specsItems, s) {
      // specsItems: [ { "规格": "7号", "重量": "10斤" }, { "规格": "5号", "重量": "8斤" }, { "规格": "7号", "重量": "9斤" } ]
      // s: ['规格', '重量']
      const filtered = specsItems.map(val => val[s]);
      return Array.from(new Set(filtered));
    },
  v-for="(i, index2) in specFilter(specsItems,s)"
Logo

前往低代码交流专区

更多推荐