vue问题 v-for 循环数组为对象的情况， 布局循环问题怎么回事哈啊？

Question

"type":[
{
"type":"Size",
"value":"S",
"img":"",
"id":"4501",
"lableType":"size",
"sell":"1"
},
{
"type":"Size",
"value":"M",
"img":"",
"id":"4502",
"lableType":"size",
"sell":"1"
},
{
"type":"Colour",
"value":"yellow",
"img":"https://importcsvimg/img/44258315333/3516559649_1466341984.60x60.jpg",
"id":"32161",
"lableType":"colour",
"sell":"1"
},
{
"type":"Colour",
"value":"orange",
"img":"https:///importcsvimg/img/44258315333/3500546624_1466341984.60x60.jpg",
"id":"32162",
"lableType":"colour",
"sell":"1"
}]
这个数数据，比如有size分类，colour分类，也许还有别的分类，如何使用v-for写出Size:smlxl
colour:........
这样的格式呢？因为这个数据的类型太多，我总不能一一列出v-if...=size=colour之类的，所以不知道怎么写求助啊

Answer 1

Hi,jxnx888看了描述，我理解的你意思应该是，服务端返回的数据格式，要根据type进行分类，其实理论上，应该由后端开发处理成为类似如下格式：{Size:[{...}],Colour:[{...}],}但是如果后端开发不帮你处理怎么办呢？我只说说我的想法：constsize=data.filter(({type})=>type==='Size');constcolour=data.filter(({type})=>type==='Colour');然后再分别遍历？但是这样又会很浪费如果现在已经引入了lodash这个库的话，可以考虑使用groupBy进行处理，得到我最开始描述的数据格式当然最好还是让后端处理。希望可以帮到你！

Answer 2

样式我就直接内联了，你可以写成class{{idx==0?'Size':''}}{{item.value}}{{idx==0?'Colour':''}}{{item.type}}