vue 对象属性数组从对象数组中动态渲染值
数据格式如下arr1 = [ "规格", "重量" ]arr2 =[ { "规格": "7号", "重量": "10斤" }, { "规格": "5号", "重量": "8斤" }, { "规格": "7号", "重量": "9斤" } ]用v-for就完事了,循环两次<div v-for="(s, index) in arr1" :key="index">...
   ·  
 数据格式如下
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)"
更多推荐
 
 



所有评论(0)