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>

但是，IE中不支持

<template>标记。一个通用的解决方案是创建一个返回所有标题的计算变量：

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"

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

1 个答案: