数据更新后要触发的Vue.js事件

时间:2016-01-11 15:21:43

标签: javascript vue.js

我有一个Vue.js应用程序,我有几个组件,只是为了处理一些重复的任务。

我也从AJAX请求中获取数据。

我想要输入的是,如果在Vue数据(treeDataflatTreeData)更新并采取措施后发生了事件,那么我可以执行任何其他操作吗?

var app = new Vue({
    el: 'body',
    data: {
        treeData: {items: {}},
        flatTreeData: [],
    },
});

$.getJSON('./paths.json').done(function(data) {

    // apply the file structure to the vue app
    demo.treeData = data;

    demo.flatTreeData = flattenTree(data);

});

2 个答案:

答案 0 :(得分:11)

您可以使用Vue实例的watch属性为变量添加侦听器:http://vuejs.org/api/#watch

watch: {
    'treeData': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
}

如果您要watch treeData之类的对象,则可能需要使用deep标志来观看整个对象树。

watch: {
    'treeData':  {
        handler:function (val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
        deep: true
    }
}

答案 1 :(得分:8)

我在这里使用{ data: { treeData: {} }, computed: { flatTreeData: function () { return flattenTree(this.treeData); } } } 属性。

你可以这样做:

treeData

现在,每当您更新flatTreeData时,HTTP 200都会更新。