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.

Read Also:  REST API CRUD Example in PHP with MySQLi

<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

Read Also:  PHP Time Ago Helper Function

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.

Read Also:  Calculate post read time using PHP Example

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


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 6 Ajax CRUD Example
  2. Read Also:  php send mail attachment with Pear Mail
  3. Read Also:  jQuery Ajax QR Code Generator PHP script Download
  4. Read Also:  Create Dynamic Sitemap Using PHP with Mysql
  5. Read Also:  Laravel 6 csrf tokens in ajax calls
  6. Read Also:  Smooth Scroll to ID using jQuery
  7. Read Also:  PHP Generate Random shuffles Strings Example
  8. Read Also:  Laravel 6 Ajax CRUD Example
  9. Read Also:  Calculate post read time using PHP Example
  10. Read Also:  REST API CRUD Example in PHP with MySQLi