Vue JS：刷新/重新加载整个树视图答案

【问题标题】：Vue JS : Flush / reload the whole tree-viewVue JS：刷新/重新加载整个树视图
【发布时间】：2016-04-09 11:59:46
【问题描述】：

我是 Vue JS 的新手。刚刚实现了一个示例树视图。

我如何刷新整个树视图并完全重新加载新内容？

浏览了 Vue API，但没有找到。

请帮忙。

【问题讨论】：

如果您需要帮助，请向我们展示您的代码

标签： javascript treeview hierarchical-data vue.js

【解决方案1】：

如果你参考这个：http://vuejs.org/examples/tree-view.html

对此没有特殊的方法。您只需用新数据替换数据：

var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  },
  methods: {
    //call this method e.g. from a buttons click event.
    flushtree: function() {
      this.treeData = newData // get new Data from somehwere.
    }
  }
})

【讨论】：

感谢您的解决方案。顺便说一句，关于如何在某个时候停止添加子节点（禁用 dbl 点击事件或在某个子节点处停止递归行为）有什么想法吗？
我会添加一个道具 depth 并在每次递归调用时增加它。然后检查点击处理程序是否depth < 10或其他内容，具体取决于您的条件。

【解决方案2】：

我修改后的代码sn-p：

if(demo!=null) {
    demo.flushtree(tableJson);
} else {
    demo = new Vue({
    data: {
     treeData: tableJson
    },
    methods: {
        flushtree: function(newData) {
        this.treeData = newData;
    }
}
})
demo.$mount('#demo');
}

谢谢:)

【讨论】：