數據未在Vue中更新

Question

當我觸發該方法時，我得到了我想要的字符串，但不確定為什么它沒有保存在數據對象上。 任何幫助將不勝感激。 謝謝

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

更新：忘了提到我正在使用jQuery進行ajax請求。

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

問題是“this.output”在Jquery的范圍內; （這= = jquery）。

你需要引用主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;
        });
    }
  }
 });