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:smlxlcolour:........这样的格式呢？因为这个数据的类型太多，我总不能一一列出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}}