Posted inProgramming / VueJs

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.


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

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype