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）。

您需要引用主对象：

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

Vue 中的数据未更新

Data not updating in Vue

javascript

vue.js