Universal and flexible tree component for Vue.js
npm install vue-vtree
<script src="https://cdn.jsdelivr.net/npm/vue-vtree@latest/dist/v-tree.min.js"></script><script src="https://unpkg.com/vue-vtree"></script>In your script entry point:
import Vue from 'vue';
import VTree from 'vue-vtree';
Vue.component('v-tree', VTree);Just write one level of tree in scoped-slot and pass children data to empty child v-tree component and it will inherit the parent slot template.
<template>
<div id="app">
<v-tree :scope-data="menu">
<ul slot-scope="menuLevel">
<li v-for="menuItem in menuLevel">
<a :href="menuItem.url">{{ menuItem.title }}</a>
<v-tree v-if="menuItem.children" :scope-data="menuItem.children"></v-tree>
</li>
</ul>
</v-tree>
</div>
</template>
<script>
export default {
data () {
return {
menu: [
{ title: 'Home', url: '#' },
{
title: 'Posts',
url: '#',
children: [
{ title: 'Development', url: '#' },
{ title: 'Design', url: '#' },
{ title: 'Other', url: '#' }
]
},
{
title: 'Handbooks',
url: '#',
children: [
{
title: 'HTML',
url: '#',
children: [
{ title: 'a', url: '#' },
{ title: 'span', url: '#' },
{ title: 'div', url: '#' }
]
},
{
title: 'CSS',
url: '#',
children: [
{ title: 'display', url: '#' },
{ title: 'position', url: '#' },
{ title: 'background', url: '#' },
{ title: 'border', url: '#' }
]
},
]
},
]
}
}
}
</script>Property "scope-data" can take any value.