如何使用 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

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

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>

我还没有测试过代码，但它应该可以工作:)