vue. js deletion of tree component double click to add branch instance code

html code:

<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle">
{{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<!--v-show Control of the current element display Property, according to the v-show Inside the value to judge, true Show, false Do not display -->
<ul v-show="open" v-if="isFolder">
<!--model Used to bind data bidirectionally -->
<item class="item" v-for="model in model.children" :model="model">
</item>
</ul>
</li>
</script>
<ul id="demo">
<item class="item" :model="treeData">
</item>
</ul>

The x-template global attribute is used here, and the page load is not displayed, but it can be used by js

js code:

<script>
// Load the initial data of the tree structure, which can be used ajax Get 
var data = {
name: 'My Tree',
children: [
{ name: '1 Grade ' },
{ name: '1 Grade ' },
{
name: '1 Level has submenus ',
children: [{
name: '2 Level has submenus ',
children: [
{ name: '3 Grade ' },
{ name: '3 Grade ' }
]
},
{ name: '2 Grade ' },
{ name: '2 Grade ' }
]
}
]
}
Vue.component ( 'item', {// Gets global components (can be used to register components) 
template: '#item-template',
props: {
model: Object// Definition model Data format 
},
data: function ()  {
return {
open: false//vue For style change operations, true Display  false Do not display 
}
},
computed: {// Read write function, not write get,set Is read-only 
isFolder: function ()  {
return this.model.children
}
},
methods: {
toggle: function ()  {
if ( this.isFolder )  {
this.open = !this.open// Open the tree structure 
}
}
}
} ) 
<li><a href="http://www.wfqcp.com/" rel="external nofollow" > Weifang long-distance bus station </a></li>
var demo = new Vue ( {// Create 1 A vue Instance, binding tree data 
el: '#demo',
data: {
treeData: data
}
} ) 
</script>