Simple VueJS Tree Menu Expandable

Contents

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.

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.


  how to create dynamic tree view in Vuejs

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.

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.

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

Simple VueJS Tree Menu Expandable