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)"
更多推荐
已为社区贡献11条内容
所有评论(0)