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:
s m l xl

colour:
........

这样的格式呢？因为这个数据的类型太多，我总不能一一列出v-if ...=size =colour之类的，所以不知道怎么写
求助啊

Answer 1

Hi, jxnx888
看了描述，我理解的你意思应该是，服务端返回的数据格式，要根据 type 进行分类，其实理论上，应该由后端开发处理成为类似如下格式：

{
  Size: [{
    ...
  }],
  Colour: [{
    ...
  }],
}

但是如果后端开发不帮你处理怎么办呢？
我只说说我的想法：

const size = data.filter(({type}) => type === 'Size');
const colour = data.filter(({type}) => type === 'Colour');

然后再分别遍历？但是这样又会很浪费

如果现在已经引入了 lodash 这个库的话，可以考虑使用 groupBy 进行处理，得到我最开始描述的数据格式

当然最好还是让后端处理。

希望可以帮到你！

Answer 2

样式我就直接内联了，你可以写成class

<ul style="font-size:0">
    <li style="display:inline-block;text-align:center;font-size:14px;" v-for="(item,idx) in types" :key="idx">
        <p style="width:60px;height:30px;line-height:30px">{{idx==0?'Size':''}}</p>
        <p style="width:60px;height:30px;line-height:30px">{{item.value}}</p>
        <p style="width:60px;height:30px;line-height:30px">{{idx==0?'Colour':''}}</p>
        <p style="width:60px;height:30px;line-height:30px">{{item.type}}</p>
    </li>
</ul>

Answer 3

type数据我就当在data里面了， js for循环很快的，不用担心性能

// template
<div v-for="(t, index) in list" :key="index">
      <!-- 内容 -->
      <span v-text="t.type"></span>
      <ul>
        <li v-for="(item, index2) in t.data" :key="index2" v-text="item.value">

        </li>
      </ul>
    </div>
// computed
list: function () {
      let that = this
      let list = []
      for (let t of that.type) {
        list.push(t.type)
      }
      list = [...new Set(list)]
      let data = []
      for (let l of list) {
        let arr = []
        for (let t of that.type) {
          if (t.type === l) {
            arr.push(t)
          }
        }
        data.push({
          type: l,
          data: arr
        })
      }
      return data
    }