CODEWITHSUNDEEP
javascriptvue.js
Ran Slobozianu
Ran Slobozianu

Reputation: 13

Data not updating in Vue

When I trigger the method, I get the string I wanted back but not sure why it is not saved on the data object. Any help will be appreciated. Thanks

new Vue({
  el: '#app',
  data: {
    output: '' // <- var test (string) 
  },
  methods: {
    searchProperty: function () {
        $.get(baseUrl, function(res) {
            var test = $(res).find('#label_bin_output').text();
            this.output = test;
        });
    }
  }
});

update: forgot to mention that I'm using jQuery for ajax request.

Upvotes: 1

Views: 589

Answers (2)

cbertelegni
cbertelegni

Reputation: 423

The problem is that "this.output" is in scope of Jquery; (this == jquery).

You need to make a reference to main obj:

new Vue({
   el: '#app',
   data: {
     output: '' // <- var test (string) 
   },
   methods: {
    searchProperty: function () {
        var _self = this; // ref to main...
        $.get(baseUrl, function(res) {
            // try console.log this and _self
            console.log(_self);
            console.log(this);
            var test = $(res).find('#label_bin_output').text();
            _self.output = test;
        });
    }
  }
 });

Upvotes: 1

Qingfeng
Qingfeng

Reputation: 720

new Vue({
  el: '#app',
  data: {
    output: '' // <- var test (string) 
  },
  methods: {
    searchProperty: function () {
        var self = this;
        ^^^^^^^^^^^^^^^^
        $.get(baseUrl, function(res) {
            var test = $(res).find('#label_bin_output').text();
            self.output = test;
            ^^^^
        });
    }
  }
});

Upvotes: 2

Related Questions