github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/examples/tree/tree.js (about)

     1  // demo data
     2  var data = {
     3    name: 'My Tree',
     4    children: [
     5      { name: 'hello' },
     6      { name: 'wat' },
     7      {
     8        name: 'child folder',
     9        children: [
    10          {
    11            name: 'child folder',
    12            children: [
    13              { name: 'hello' },
    14              { name: 'wat' }
    15            ]
    16          },
    17          { name: 'hello' },
    18          { name: 'wat' },
    19          {
    20            name: 'child folder',
    21            children: [
    22              { name: 'hello' },
    23              { name: 'wat' }
    24            ]
    25          }
    26        ]
    27      }
    28    ]
    29  }
    30  
    31  // define the item component
    32  Vue.component('item', {
    33    template: '#item-template',
    34    replace: true,
    35    props: {
    36      model: Object
    37    },
    38    data: function () {
    39      return {
    40        open: false
    41      }
    42    },
    43    computed: {
    44      isFolder: function () {
    45        return this.model.children &&
    46          this.model.children.length
    47      }
    48    },
    49    methods: {
    50      toggle: function () {
    51        if (this.isFolder) {
    52          this.open = !this.open
    53        }
    54      },
    55      changeType: function () {
    56        if (!this.isFolder) {
    57          Vue.set(this.model, 'children', [])
    58          this.addChild()
    59          this.open = true
    60        }
    61      },
    62      addChild: function () {
    63        this.model.children.push({
    64          name: 'new stuff'
    65        })
    66      }
    67    }
    68  })
    69  
    70  // boot up the demo
    71  var demo = new Vue({
    72    el: '#demo',
    73    data: {
    74      treeData: data
    75    }
    76  })