Vuejs Recursive components

Objective

Learning Vue for a while, recently used Vue to do a set of back-office management system, which uses the most recursive components, but also because of their unfamiliar official documents so that they tread a lot of pits, today write to share with you.

Recursive components

A component can call itself recursively within its template, only if it has an name option. On the official website. The key definition component must have the name attribute. Let's start with this idea.

Achieve the final:

　　　　

The analog data format is as follows:

　　　　

var data = [{"id": "1", "data": {"MenuName": "Project Management",                        "Menucode": "", "}," Childtreenode ": [{" Data ": { "MenuName": "Project", "Menucode": "Busproject",}, "Childtreenode ": []}, {" Data ": {" MenuName ":" My Tasks ","                    Menucode ":" Busproject ",}," Childtreenode ": []}, {                    "Data": {"MenuName": "Personnel Weekly", "Menucode": "Busproject", }, "Childtreenode": []}]}, {"id": "2", "Da                Ta ": {" MenuName ":" Data Statistics "," Menucode ":" Busclock ",},     "Childtreenode": []       }, {"id": "3", "data": {"MenuName": "Personnel Management", "                Menucode ":" ",}," Childtreenode ": []}, {" id ":" 4 ", "Data": {"MenuName": "Basic Management", "Menucode": "",}, "C Hildtreenode ": []}]

HTML we thought according to UL inside Set Li, unlimited ul set Li, title with div element wrapped,

<li>    <div @click = ' Toggle ' >
　　         <i v-if= ' isfolder ' class= "fa": class= "[open? '] Fa-folder-open ': ' Fa-folder '] "></i>
<!--Isfolder Determine if there is a child change icon--         <i v-if= '!isfolder ' class= ' fa fa-file-text ' ></i> {{ Model.data.menuName}}     </div>     <ul v-show= "open" v-if= ' Isfolder ' >          <items v-for= ' cel in Model.childtreenode ': model= ' cel ' ></items>     </ul>
</li>

The recursive component written in the official document emphasizes the use of the Name property

Export Default {    name: ' Items ',    props: [' model '], components    : {},}

According to Vue's idea, without manipulating the DOM tree, we define two variables, one showing the Hidden submenu (open), and one Saved submenu modification icon (isfolder).

Data () {        return {             open:false,             isfolder:true        }}

Dynamically change the value of the Isfolder using Vue's computed properties, modify the icon, and determine the existence of non-child and child lengths

Computed: {    isfolder () {        return this.model.childTreeNode && this.model.childTreeNode.length    }}        

Show hidden Events

Methods: {
Toggle:function () {      if (this.isfolder) {          This.open =!this.open      }}
}

Write here we have finished a tree-shaped menu, the final style is left to everyone to implement the I am posted complete code for your reference.

<template> <li> <div @click = ' Toggle ' > <i v-if= ' isfolder ' class= "fa": class= "[op En? '  Fa-folder-open ': ' Fa-folder '] "></i> <!--Isfolder Determine if there is a child change icon--<i v-if= '!isfolder ' class= "FA Fa-file-text" ></i> {{model.data.menuName}} </div> <ul v-show= "open" v-if= ' isfol Der ' > <items v-for= ' cel in Model.childtreenode ': model= ' cel ' ></items> </ul> < /li></template><script type= "Text/javascript" > Export Default {name: ' Items ', props: [' Mo Del '], components: {}, data () {return {open:false, Isfolder:tru e}}, computed: {isfolder:function () {return this.model.childTreeNo                De && This.model.childTreeNode.length}}, Methods: {toggle:function () { if (this.Isfolder) {This.open =!this.open}},}}</script> 

The company was the first to use Easyui to do the management system, I took over with Vue complete imitation of some easyui things, the following is the tree-shaped menu based on the simulation of the tree form, interested in or need to contact me. For the complete diagram

Category: JavaScript

Vuejs Recursive components