You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
932 B
57 lines
932 B
9 years ago
|
// demo data
|
||
|
var data = {
|
||
|
name: 'My Tree',
|
||
|
children: [
|
||
|
{ name: 'hello' }
|
||
|
]
|
||
|
}
|
||
|
|
||
|
// define the item component
|
||
|
Vue.component('item', {
|
||
|
template: '#item-template',
|
||
|
props: {
|
||
|
model: Object
|
||
|
},
|
||
|
data: function () {
|
||
|
return {
|
||
|
open: false
|
||
|
}
|
||
|
},
|
||
|
updated: function () {
|
||
|
console.log(this._vnode)
|
||
|
},
|
||
|
computed: {
|
||
|
isFolder: function () {
|
||
|
return this.model.children &&
|
||
|
this.model.children.length
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
toggle: function () {
|
||
|
if (this.isFolder) {
|
||
|
this.open = !this.open
|
||
|
}
|
||
|
},
|
||
|
changeType: function () {
|
||
|
if (!this.isFolder) {
|
||
|
Vue.set(this.model, 'children', [])
|
||
|
this.addChild()
|
||
|
this.open = true
|
||
|
}
|
||
|
},
|
||
|
addChild: function () {
|
||
|
this.model.children.push({
|
||
|
name: 'new stuff'
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
|
||
|
// boot up the demo
|
||
|
var demo = new Vue({
|
||
|
el: '#demo',
|
||
|
data: {
|
||
|
treeData: data
|
||
|
}
|
||
|
})
|