or Nested List - Vuetify
12,461
I solved this by nesting v-list like this:
<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>
This can go arbitrarily deep. In fact, I needed an infinitely nesting list so I created this simple recursive component:
<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>
Author by
Marcos Moskorz
Updated on June 09, 2022Comments
-
Marcos Moskorz almost 2 years
I am trying to create nested list with more than three levels of nesting. When I put children object of items inside child item in v-list it doesn't display anything.
Is is even possible to create such nested list in vuetify? If not, what solution could be to this problem?
<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>
If there is another way to make big nested list using Vue.js without using jQuery I would like to learn to.
Sorry for not explain well. In this way a have posted a can reach 3 levels of list, but i cant go further like four or five levels.
-
Nithin almost 5 yearsawesome thanks, didn't knew i could encapsulate stuff in template