javascript - 或嵌套列表 - Vuetify
问题描述
我正在尝试创建具有三个以上嵌套级别的嵌套列表。当我将子项的子项放在 v-list 中的子项中时,它不会显示任何内容。
甚至可以在 vuetify 中创建这样的嵌套列表吗?如果不是,有什么办法可以解决这个问题?
<div>
<v-list v-for="(powerPlant, i) in powerPlants" :key="i">
<v-list-group
prepend-icon="fas fa-bolt"
value=""
>
<v-list-tile slot="activator">
<v-list-tile-title>{{powerPlant.name}}</v-list-tile-title>
</v-list-tile>
<v-list-group
no-action
sub-group
value="true"
v-for="(generator, i) in generators" :key="i"
>
<v-list-tile slot="activator">
<v-list-tile-title>{{generator.name}}</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-for="(option, i) in options"
:key="i"
>
<v-list-tile-title v-text="option[0]"></v-list-tile-title>
<v-list-tile-action>
<v-icon v-text="option[1]"></v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list-group>
</v-list>
</div>
如果有另一种方法可以在不使用 jQuery 的情况下使用 Vue.js 制作大型嵌套列表,我想学习。
抱歉没有解释清楚。这样,一个已经发布了一个可以达到 3 级的列表,但我不能更进一步,比如四五级。
解决方案
我通过像这样嵌套 v-list 解决了这个问题:
<v-list>
<v-list-group v-for='node in nodes' v-model='node.active'>
<v-list-tile slot='activator' @click=''>
<v-list-tile-title>{{node.text}}</v-list-tile-title>
</v-list-tile>
<v-list class='py-0 pl-1'>
<v-list-group v-for='child in node.children' v-model='child.active'>
<v-list-tile slot='activator' @click=''>
<v-list-tile-title>{{child.text}}</v-list-tile-title>
</v-list-tile>
<v-list class='py-0 pl-2' v-for='grandchild in child.children'>
<v-list-tile>
<v-list-tile-title>{{grandchild.text}}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-list-group>
</v-list>
</v-list-group>
</v-list>
这可以任意深入。事实上,我需要一个无限嵌套的列表,所以我创建了这个简单的递归组件:
<template>
<v-list>
<template v-for='node in nodes'>
<v-list-group v-if='node.children && node.children.length' v-model='node.active'>
<v-list-tile @click='' slot='activator'>
<v-list-tile-title>{{node.text}}</v-list-tile-title>
</v-list-tile>
<node-list class='py-0 pl-3' :nodes='node.children'/>
</v-list-group>
<v-list-tile @click='' v-else>
<v-list-tile-title>{{node.text}}</v-list-tile-title>
</v-list-tile>
</template>
</v-list>
</template>
<script>
export default {
name: 'node-list',
props: ['nodes'],
}
</script>
推荐阅读
- generics - 如何通过泛型从 Singleton 对象中检索值
- spring - Spring,跳过(空)配置文件
- openid - OpenId Connect:同意可以在认证页面上吗?
- javascript - 在同一个组件中设置两次状态
- java - Firebase 到 ImageView - 为什么即使没有图像,我的聊天也会显示图像?
- javascript - Angular 6 不适用于 Bootstrap 3 Datepicker
- google-chrome - Google Colab 内存不足,无法打开此页面
- microsoft-graph-api - 使用 .NET Core 2.0 创建简单的控制台应用程序
- c# - MATLAB(.NET 程序集)数据类型问题:MWArray 到字符串的转换
- javascript - 如何检查所选文件是目录还是常规文件?