vue问题 v-for 循环数组为对象的情况, 布局循环问题

"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之类的,所以不知道怎么写
求助啊

阅读 972
评论
    3 个回答

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

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

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

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

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

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

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

    希望可以帮到你!

      样式我就直接内联了,你可以写成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>

        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
            }
          撰写回答

          登录后参与交流、获取后续更新提醒