vue.js在列表中加倍v-for

Question

所以我在我的项目中使用了vue.js并且我有一个问题:如何在列表项或选择选项中显示另一个v-for内部的v-for元素？我有抽象的东西:

<div v-for='item in items'>
  <div v-for='element in item.elements'>
    ...
  </div>
</div>

非常感谢任何可能的帮助,谢谢!

Answer 1

您可以使用<template>标记,以便不呈现额外的div.

<ul>
 <template v-for='item in items'>
  <li v-for='element in item.elements'>
    {{element.title}}
  </li>
 </template>
</ul>

<template>但是,IE中不支持tag.一个通用的解决方案是创建一个返回所有标题的计算变量:

computed:{
  titles:function(){
    var titles = [];
    for(var i = 0; i < this.items.length; i++){
      for(var k = 0; k < this.items[i].length; k++){
        titles.push(this.items[i][k].title);
      }
    }
    return titles;
  }
}

然后就可以了 v-for="title in titles"