所以我用的是vue.我有一个问题:如何在另一个v-for中显示v-for元素作为列表项或 Select 选项?

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

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

推荐答案

可以使用<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相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

Vue.js 3 运行时挂载组件实例

在 VueJS 中,将变量而不是组件的字符串名称传递给动态组件的 :is 属性不起作用

如何在 vuejs 中导入和使用本地 .csv 文件

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

更改 Vuetify 轮播高度

在重复表行中

VueJS 插件的如何react式绑定?

从组件的 内的组件调用方法

如何将 ASP.NET Core 2.1 与 Vue CLI 3 集成?

查看 cli3 启用 CORS

eslint – 如何知道 defined定义规则的位置

Django Rest 框架、CSRF 和 Vue.js

将数据传递给另一条路由上的组件

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

Vuetify 2 个工具栏和 1 个导航抽屉,navigation drawer导航抽屉上方有 1 个工具栏

无法访问数据对象的嵌套属性

vuex - 即使不推荐,是否可以直接更改状态?

使用 vuejs 设置响应式屏幕宽度

返回 VueJS 方法的Native Code消息