数据未在Vue中更新

Question

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.

Answer 1

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

Answer 2

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