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

我知道这个答案很晚，但我认为这对某人有帮助。我找到的最简单的方法是使用＆＃34; chunk＆＃34; Vue控制器中的方法。这会将数组拆分为 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)

Answer 2

您可以将数组拆分为块，然后单独渲染每个块。

let arrays = [];
const size = 3;

while (yourArray.length > 0)
    arrays.push(yourArray.splice(0, size));

然后在它们之间迭代：

<div v-for="item in arrays[0]">
  <span>1</span>
  <ul>
    <li>1 item.value</li>
    <li>2 item.value</li>
    <li>3 item.value</li>
  </ul>
</div>
<div v-for="item in arrays[1]">
 <span>2</span>
  <ul>
    <li>1 item.value</li>
    <li>2 item.value</li>
    <li>3 item.value</li>
  </ul>
</div>

或者您可以使用没有拆分的嵌套元素：

<div v-for="i in 3">
  <span>{{ i + 1 }}</span>
  <div>
    <ul>
      <li v-for="j in 3">{{ j + 1 }} yourArray[i+j].value</li>
    </ul>
  </div>
</div>

我还没有对代码进行过测试，但它应该有效：）

Answer 3

<div v-for="num in options.length/3" :key="num">
    <span>{{num}}</span>
    <ul class="label" v-for="option in options.slice(num, num+3)" :key="option.value">
        <li>{{option.id}} {{option.value}}</li>
    </ul>
</div>

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

3 个答案: