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

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>

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