76 lines
1.3 KiB
JavaScript
76 lines
1.3 KiB
JavaScript
// demo data
|
|
var data = {
|
|
name: 'My Tree',
|
|
children: [
|
|
{ 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 item component
|
|
Vue.component('item', {
|
|
template: '#item-template',
|
|
props: {
|
|
model: Object
|
|
},
|
|
data: function () {
|
|
return {
|
|
open: false
|
|
}
|
|
},
|
|
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
|
|
}
|
|
})
|