<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<section id="app">
<h1 v-html="element.title"></h1>
<treeview-component :nodes="element.nodes"></treeview-component>
</section>
<script>
let components = {};
var treeviewTemplate = `
<ul>
<li v-for="(element, elementIdx) in nodes">
{{ element.title }}
<treeview-component :nodes="element.nodes" v-if="'nodes' in element"></treeview-component>
</li>
</ul>
`;
components['treeview-component'] = {
name: 'treeview-component',
data: function () {
return {}
},
props: {
nodes: Array
},
template: treeviewTemplate
};
const app = Vue.createApp({
data: function() {
return {
element: {
title: '1',
nodes: [
{title: '2'},
{
title: '3',
nodes: [
{title: '4'},
{title: '5'}
]
}
]
}
}
},
components: components,
});
app.mount('#app');
</script>
</body>
</html>