来自Ajax Request Vue2的Init数据

Question

Vue.component('config_input', {

template: '#config-input-template',

data() {
    paterns: []
},

computed: {
    testData() {
        return this.paterns;
    }
},

mounted() {
    var self = this;
    axios.get('/listPatern').then(function (response) {
        self.paterns = response.data;
    }
},

});

在控制台中显示testData是一个空数组。这意味着内部成功ajax请求函数'paterns'值尚未更新。任何人都可以告诉我如何将数据响应分配给'paterns'值吗？

Answer 1

你可以仔细阅读VueJS Tutorials。

当您将纯JavaScript对象作为其数据选项传递给Vue实例时，Vue将遍历其所有属性并使用Object.defineProperty将它们转换为getter / setter。这是一个仅限ES5且不可调整的功能，这就是Vue不支持IE8及以下版本的原因。

getter / setter对用户是不可见的，但是在引擎盖下，它们使Vue能够在访问或修改属性时执行依赖关系跟踪和更改通知。需要注意的是，当记录转换后的数据对象时，浏览器控制台会以不同的方式格式化getter / setter，因此您可能需要安装vue-devtools以获得更易于检查的界面。

VueJS执行类似“代理”的活动数据，因此您无法在Object中分配值。

// Wrong
self.paterns = response.data;

// Right
self.someObject = Object.assign({}, self.someObject, response.data)

而data应该是一个Object

data: {
    patterns: []
}

Answer 2

我尝试过使用axios来获取ajax。

不幸的是，我浪费了3个小时，因为我尝试的代码无关紧要，数据根本没有被初始化。

我使用vue-resource，我的代码第一次工作！

包括vue-resource库并更改已挂载的方法，如下所示：

mounted() {
    var self = this;
    this.$http.get('/listPatern').then(function (response) {
        self.paterns = response.data;
    }
}