CODEWITHSUNDEEP
javascriptvue.js
Ben Everard
Ben Everard

Reputation: 13804

Vue.js event to fire after data is updated

I have a Vue.js app of which I have a couple of components for, just to handle some repetitive tasks.

I'm also fetching data from an AJAX request.

What I'd like some input on is if there is an event that fires after Vue data (treeData and flatTreeData) has been updated and actioned so I can perform any additional actions?

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);

});

Upvotes: 10

Views: 17759

Answers (2)

Bill Criswell
Bill Criswell

Reputation: 32921

I'd use a computed property here instead.

You can do:

{
  data: {
    treeData: {}
  },
  computed: {
    flatTreeData: function () {
      return flattenTree(this.treeData);
    }
  }
}

Now this way every time you update treeData, flatTreeData also gets updated.

Upvotes: 8

Jeff
Jeff

Reputation: 25221

You can use the watch property of the Vue instance to add listeners to variable changes: http://vuejs.org/api/#watch

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

If you are going to be watching an object like treeData, you may need to use the deep flag to watch the entire object tree.

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

Upvotes: 14

Related Questions