3

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

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

在此块中,每个 2 跨度包装都带有一个带有“The-row”类的标签,每个跨度标签都有一个替代项,这意味着:

<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

在这支笔中,我有 2 个重要问题 1. 第一项显示 2. 项目不能均匀

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

谢谢

4

3 回答 3

1

你可以这样工作

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;
}
 }
于 2018-03-28T05:34:52.430 回答
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>
于 2018-02-03T10:44:19.520 回答
0

我可能会尝试对数据进行分组(使用计算属性),而不是使模板更复杂。

但是,最短的解决方法是交换索引,因为$index === 0它是隐藏的和$index === 1显示的,等等。

<input class="option-input"...
<label class="option" for="option-1">
  <span class="option__label">
    <sub>{{items[$index -1].name}}</sub> 
  </span>
</label>

<input class="option-input"...
<label class="option" for="option-1">
  <span class="option__label">
    <sub>{{items[$index].name}}</sub> 
  </span>
</label>

这是分组功能的简短版本。

参考:Array.prototype.reduce()

console.clear()
const items = [
  { id: 1 , name: 'one'},
  { id: 2 , name: 'two'},
  { id: 3 , name: 'three'},
  { id: 4 , name: 'four'},
  { id: 5 , name: 'five'},
  { id: 6 , name: 'six'},
  { id: 7 , name: 'seven'},
  { id: 8 , name: 'eight'},
  { id: 9 , name: 'nine'},
  { id: 10 , name: 'ten'}
];

const grouped = items.reduce((acc, item, index, items) => {
  return index % 2 === 0 ? acc : [...acc, [items[index -1], item]];
}, [])

console.log(grouped);
.as-console-wrapper { min-height: 100% !important; top: 0 }

于 2018-02-03T10:29:11.150 回答