mirror of https://github.com/vuejs/vue.git
57 lines
932 B
JavaScript
57 lines
932 B
JavaScript
|
// 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
|
||
|
}
|
||
|
})
|