Simple VueJS Tree Menu Expandable

Simple VueJS Tree Menu Expandable

Today, We want to share with you Simple VueJS Tree Menu Expandable.
In this post we will show you A Vue.js tree navigation menu, hear for Dynamic Category Subcategory Tree using VueJS we will give you demo and example for implement.
In this post, we will learn about Vue.js Expandable Tree Menu with an example.

Getting Started for VueJS Tree Menu

We have used CDN(libes) for vuejs so you must need Your internet Data connection for them to work on Dynamic Category Subcategory Tree using VueJS.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Vue.js Expandable Tree Menu) dependencies and the HTML Elements that we have created.

Also Read This πŸ‘‰   Create Thumbnail And Upload image using PHP

<div class="pakainfo container">
  <h4>how to create dynamic tree view in Vuejs</h4>
  <div id="PakaApp">
  <live-tree 
             :nodes="tree.nodes" 
             :depth="0"   
             :label="tree.label"
             ></live-tree>
  </div>
</div>


<script type="text/x-template" id="live-tree">
  <div class="live-tree">
    <div class="label-wrPakaApper" @click="subcatToggle">
      <div :style="indent" :class="labelClasses">
        <i v-if="nodes" class="fa" :class="myCustomClass"></i>
        {{ label }}
      </div>
    </div>
    <live-tree 
      v-if="subcategory"
      v-for="mycat in nodes" 
      :nodes="mycat.nodes" 
      :label="mycat.label"
      :depth="depth + 1"   
    >
    </live-tree>
  </div>
</script>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

let tree = {
  label: 'root',
  nodes: [
    {
      label: 'product1',
      nodes: [
        {
          label: 'product1.1'
        },
        {
          label: 'product1.2',
          nodes: [
            {
              label: 'product1.2.1'
            }
          ]
        }
      ]
    }, 
    {
      label: 'item2'  
    }
  ]
}

Vue.component('live-tree', { 
  template: '#live-tree',
  props: [ 'nodes', 'label', 'depth' ],
  data() {
     return {
       subcategory: false
     }
  },
  computed: {
    myCustomClass() {
      return {
        'fa-plus-square-o': !this.subcategory,
        'fa-minus-square-o': this.subcategory
      }
    },
    labelClasses() {
      return { 'has-children': this.nodes }
    },
    indent() {
      return { transform: `translate(${this.depth * 50}px)` }
    }
  },
  methods: {
    subcatToggle() {
       this.subcategory = !this.subcategory;
    }
  }
});

new Vue({
  el: '#PakaApp',
  data: {
    tree
  }
})

style.css

Last step, we have add the Following CSS styles for our simple vuejs tree menu Expandable Custom Style and our Custom styling.

Also Read This πŸ‘‰   Trigger Function When DIV Enters Viewport in jQuery

body {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
}

.container {
  width: 350px;
  margin: 0 auto;
}

.live-tree {
  .label-wrPakaApper {
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid #3d3d3d;
    .has-children {
      cursor: pointer;
    }
  }
}

We hope you get an idea about Treeview using Bootstrap Treeview, Vuejs and JavaScript
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

Also Read This πŸ‘‰   Jquery Datatable listing json Server side in Php Mysql and Ajax

We hope This Post can help you…….Good Luck!.