}.item{cursor:pointer;
}.bold{font-weight:bold;
}ul{padding-left:1em;line-height:1.5em;list-style-type:dot;
}
:class="{bold: isFolder}"@click="toggle"@dblclick="makeFolder">{{ item.name }}[{{ isOpen? '-':'+'}}]
class="item1"v-for="(child, index) in item.children":key="index":item="child"@make-folder="$emit('make-folder', $event)"@add-item="$emit('add-item', $event)"
>
+(You can double click on an item to turn it into a folder.)
>
vartreeData=[
{ name:'hello'},
{ name:'wat'},
{
name:'child folder',
children: [
{
name:'child folder',
children: [
{ name:'hello'},
{ name:'wat'}
]
},
{ name:'hello'},
{ name:'wat'},
{
name:'child folder',
children: [
{ name:'hello'},
{ name:'wat'}
]
}
]
}
]//define the tree-item component
Vue.component('tree-item', {
template:'#item-template',
props: {
item: Object
},
data:function() {return{
isOpen:false}
},
computed: {
isFolder:function() {return this.item.children&&
this.item.children.length
}
},
methods: {
toggle:function() {if(this.isFolder) {this.isOpen= !this.isOpen
}
},
makeFolder:function() {if(!this.isFolder) {this.$emit('make-folder',this.item)this.isOpen= true}
}
}
})//boot up the demo
vardemo= newVue({
el:'#demo',
data: {
treeData: treeData
},
methods: {
makeFolder:function(item) {
Vue.set(item,'children', [])this.addItem(item)
},
addItem:function(item) {
item.children.push({
name:'new stuff'})
}
}
})
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
