How to update data of a VueJS instance from a jQuery AJAX call?

Question

I have a VueJS instance with some data :

var vm = new Vue({
    el: \'#root\',
    data: {
        id: \'\',
        name: {
            firstname: \"\", 
           


        

Answer 1

Another thing that plays a role here is how Vue.js updates the DOM. For details read this section in the documentation: Async Update Queue

In short use "nexTick" callback to process your code after Vue.js is done updating the DOM.

methods: {
   someMethod() {
      var self = this;
      $.ajax({
        url: 'http://...',
      }).done(function (data) {
        self.a = data.a;
        self.b = data.b;
        self.$nextTick(function () {
           // a and b are now updated
        }
      });
   }
}