Question

是否可以编写带有两个变量的 v-for 迭代？

我尝试了类似的方法，但是没有用

<ul id="example-1">
  <li v-for="apple in apples" v-for="banana in bananas">
    {{ apple .message }}
    {{ banana .message }}
  </li>
</ul>

感谢您的帮助！

Answer 1

我将创建一个将两个数组组合成对象数组的计算属性。

这样，您还可以容纳不同的长度。例如

computed: {
  fruit() {
    const fruit = []
    for (let i = 0, len = Math.max(this.apples.length, this.bananas.length); i < len; i++) {
      fruit.push({
        appleMessage: this.apples[i] && this.apples[i].message || 'no apple message',
        bananaMessage: this.bananas[i] && this.bananas[i].message || 'no banana message'
      })
    }
    return fruit
  }
}

然后您可以进行迭代

<li v-for="f in fruit">
  {{ f.appleMessage }}
  {{ f.bananaMessage }}
</li>

演示〜http://jsfiddle.net/wzmL1y6q/

Answer 2

那又怎么样呢？

<ul id="example-1">
  <li v-for="(apple, index) in apples">
    {{ apple.message }}
    {{ banana[index].message }}
  </li>
</ul>

但是您必须确保列表的长度相同。

Vue.js：v-for迭代有两个变量

2 个答案: