vue 对象属性数组从对象数组中动态渲染值

数据格式如下

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)"