SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Пример компонента "Дерево" на Vue.js

--- index.html

index.html

index.html Скачать

<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>