vuejs Treeview nested component Inputs

vuejs Treeview nested component Inputs

Today, We want to share with you vuejs Treeview nested component Inputs.
In this post we will show you vuejs Treeview nested component inputs – VueJS tree component, hear for vuejs Treeview nested component inputs we will give you demo and example for implement.
In this post, we will learn about Treeview with nested inputs with VueJS with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.vuejs Treeview nested component inputs – VueJS tree component

READ :  Get url parameter using angular js

html part

Simple wrap the raw data with `model` all the alias so we can manage here tree view state without and then the polluting the original simple data in this example to show vue js component lifecycle.

<div id="tree_demo">
    <ul>
        <li v-component="folder" v-with="model: treeData"></li>
    </ul>
</div>

<script type="text/x-template" id="folder-template">
    <div class="product_item folder" v-on="click: open = !open">
        {{model.name}} [{{open ? '-' : '+'}}]
    </div>
    <ul v-show="open">
        <li v-repeat="model: model.children | orderBy 'type'"
            v-component="{{model.type}}">
        </li>
    </ul>
</script>

<script type="text/x-template" id="file-template">
    <div class="product_item file">{{model.name}}</div>
</script>

Script file

Component Properties With Vue.js for the all the main folder to add nested sub folder structure to display using css.

Vue.component('folder', {
    template: '#folder-template',
    data: {
        open: false
    }
})

Vue.component('file', {
    template: '#file-template'
})

var menu = new Vue({
    el: '#tree_demo',
    data: {
        treeData: {
            name: 'infinityknow',
            children: [
                { type: 'file', name: 'Angularjs' },
                { type: 'file', name: 'laravel' },
                {
                    type: 'folder',
                    name: 'child folder',
                    children: [
                        {
                            type: 'folder',
                            name: 'child folder',
                            children: [
                                { type: 'file', name: 'php' },
                                { type: 'file', name: 'vuejs' }
                            ]
                        },
                        { type: 'file', name: 'javascript' },
                        { type: 'file', name: 'jQuery' },
                        {
                            type: 'folder',
                            name: 'child folder',
                            children: [
                                { type: 'file', name: 'magento' },
                                { type: 'file', name: 'codigneter' }
                            ]
                        }
                    ]
                }
            ]
        }
    }
})

css code :

simple code using css to all the view add this class to level display for tree view level.

READ :  AngularJS Expressions - Dynamic angular 6 Examples

.product_item {
    cursor: pointer;
    font-family: monospace;
    color: #d3d3d3;
}
.product_item.folder {
    color: #CDDCFG;
}
ul {
    padding-left: 1em;
    list-style-type: circle;
}

Demo

Add a Comment

Your email address will not be published. Required fields are marked *