javascript - 在 Vue.JS 中循环以迭代一些项目并将它们包装在一个元素中

Question

我是 Vue 的新手，我想创建一个循环 (v-for) 来创建类似这个 block 的东西

<div class="The-row">
 <span> {{ * }} </span>
 <span> {{ * }} </span>
</div>

在这个 block 中，每 2 个 span 都用一个带有“The-row”类的标签包装，每个 SPAN 标签都有一个替代项，这意味着:

<div class="The-row">
 <span> {{ item[0] }} </span>
 <span> {{ item[1] }} </span>
</div>
----------------------------------
<div class="The-row">
 <span> {{ item[2] }} </span>
 <span> {{ item[3] }} </span>
</div>

我在为创建循环做什么，我知道这种方式可以在每两次循环中显示一个元素

<div v-if=" index % 2 == 0 " >

看到这支笔 -> https://codepen.io/hamidrezanikoonia/pen/RQrvKJ

在这支笔中，我有两个重要的问题 1. 第一项dosent show 2.元素不能均匀

并且，请以正确的方式检查我，或者我可以使用其他方式

谢谢

Answer 1

我也更愿意改变数据的结构，而不是构建一个复杂的模板。但它会像这样工作:

<div class="option-row" v-if="($index + 1) % 2 == 1 ">

  <input class="option-input" id="option-1" type="radio" name="options" />
  <label class="option" for="option-1">
    <span class="option__label">
      <sub>{{item.name}}</sub>
    </span>
  </label>

  <input v-if="items[$index + 1]" class="option-input" id="option-1" type="radio" name="options" />
  <label v-if="items[$index + 1]" class="option" for="option-1">
    <span class="option__label">
      <sub>{{items[($index + 1)].name}}</sub>
    </span>
  </label>

</div>

这与 Richard Matsen 已经提到的解决方案相同。只有一点点增强:如果奇数元素不存在，则避免错误。

您可以为此使用计算属性:

computed: {
    groupedItems() {
        let grouped = [];
        index = -1;
        for (let i = 0; i < this.items.length; i++) {
            if (i % 2 == 0) { 
                index++;
                grouped[index] = [];
            }
            grouped[index].push(this.items[i]);
        }
        return grouped;
    }
}

你的模板会变得更干净:

<template v-for="items in groupedItems">
    <div class="option-row">
        <div v-for="item in items">
            <input class="option-input" id="option-1" type="radio" name="options" />
            <label class="option" for="option-1">
                <span class="option__label">
                    <sub>{{item.name}}</sub>
                </span>
            </label>
        </div>  
    </div>
</template>