vue.js - 如何使用 Vue.js 在拆分组中呈现列表？

Question

我有一个从服务器返回的 json 对象，它具有可变数量的日期，格式大致如下:

[{"data":{"level":1,"sub_level":1,"value": 10},
 {"data":{"level":1,"sub_level":2,"value": 23},
 {"data":{"level":1,"sub_level":3,"value": 3},
 {"data":{"level":2,"sub_level":1,"value": 55},
 {"data":{"level":2,"sub_level":2,"value": 52}]

我正在尝试遍历数据并获得类似于以下 HTML 的输出，假设数据集中有九个元素要遍历。

基本上，我想将数据集输出到三个对象的组中，计算每组中的对象，然后对接下来的三个重复。

<div>
  <span>1</span>
  <ul>
    <li>1 item.value</li>
    <li>2 item.value</li>
    <li>3 item.value</li>
  </ul>
</div>
<div>
  <span>2</span>
  <ul>
    <li>1 item.value</li>
    <li>2 item.value</li>
    <li>3 item.value</li>
  </ul>
</div>
<div>
  <span>3</span>
  <ul>
    <li>1 item.value</li>
    <li>2 item.value</li>
    <li>3 item.value</li>
  </ul>
</div>

我不确定在 Vue.js 模板中执行此操作的最佳方式。

Answer 1

我知道这个答案来晚了，但我认为它可能对某人有帮助。我发现的最简单的方法是在 Vue Controller 中使用“ block ”方法。这会将数组分成 n 个组...

var vm = new Vue({
  el: '#app',
  data: {
    nColumns: 3, // number of groups/columns
    items: [
      {name: 'MacBook Air Pro', price: 1900},
      {name: 'MacBook Pro', price: 1400},
      ...
    ],
    groupedItems: []
  },
  mounted() {
    var _self = this;
    // divide into n groups
    _self.chunk(this.items, Math.ceil(this.items.length/this.nColumns)); 
  },
  methods: {
    chunk: function(arr, size) {
      var newArr = [];
      for (var i=0; i<arr.length; i+=size) {
        newArr.push(arr.slice(i, i+size));
      }
      this.groupedItems  = newArr;
    }
  }
});

然后，在标记中使用嵌套的 v-for 重复组，然后是每个组中的项目。您还可以使用 :set 来维护项目的总数...

<div class="row">
        <div v-for='(g, groupIndex) in groupedItems'>
            <div v-for='(item, index) in g' :set="ictr=groupIndex*(groupedItems[0].length)+(index+1)">
                {{ictr}} {{ item.name }}
            </div>
        </div>
</div>

Working Demo (uses Bootstrap 4 for responsive layout)