Question

我正在使用Vue2。我在我的挂载方法中通过ajax获取json数据。然后，我将该数据设置为一个数据变量，期望可以从mount之外的其他方法访问该数据变量，但是我得到的只是一个空的可观察对象。

有什么建议/建议吗？感谢您的帮助。

var vm = new Vue({
el: '#app',
data: function () {
    return {
        allJson: []
    };
},
methods: {
    updateTableData:  function(isActive) {
        // cannot access this.allJson here
    }
},
mounted: function() {
    $.getJSON(Routes.USERS_GET_JSON, function(json) {
        this.allJson = json;
    });
}

}）;

Answer 1

我已经很长时间没有使用jQuery了，但是如果我没记错的话，如果您想在回调中使用this的上下文，则需要显式声明它，否则会出现一些意外情况。但是，即使它是包装器，我也不知道$.getJSON是否支持它。因此，您可以尝试以下操作：

$.getJSON(Routes.USERS_GET_JSON, function(json) {
    this.allJson = json;
}, {
    context: this
})

或者您可以在功能之外使用.bind来限制this

$.getJSON(Routes.USERS_GET_JSON, function(json) {
    this.allJson = json
}.bind(this))

或者，如果您正使用babel窃听（可能是这样），则可以使用fat arrow语法：

$.getJSON(Routes.USERS_GET_JSON)
    .done( (json) => {
        this.allJson = json
    })

或者您也可以在this之前加上$.getJSON的别名

let _self = this

 $.getJSON(Routes.USERS_GET_JSON, function(json) {
    _self.allJson = json
 })

Answer 2

我的猜测是this没有绑定到回调函数中的vue实例。尝试以下

var vm = new Vue({
el: '#app',
data: function () {
    return {
        allJson: []
    };
},
methods: {
    updateTableData:  function(isActive) {
        // cannot access this.allJson here
    }
},
mounted: function() {
    const self = this;
    $.getJSON(Routes.USERS_GET_JSON, function(json) {
        self.allJson = json;
    });
}
});

无法通过Ajax

2 个答案: