Tree - Templating
Tree is used to display hierarchical data.
{{slotProps.node.label}}
{{slotProps.node.label}}
<Tree :value="nodes">
<template #default="slotProps">
<b>{{slotProps.node.label}}</b>
</template>
<template #url="slotProps">
<a :href="slotProps.node.data">{{slotProps.node.label}}</a>
</template>
</Tree>
export default {
data() {
return {
nodes: [
{
key: '0',
label: 'Introduction',
children: [
{key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
{key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
{key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'},
{key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
]
},
{
key: '1',
label: 'Components In-Depth',
children: [
{key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
{key: '1-1', llabel: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
{key: '1-2', llabel: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
{key: '1-3', llabel: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
]
}
]
}
}
}