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请求功能＆＃39; paterns＆＃39;价值还没有更新。任何人都可以告诉我如何将数据响应分配给＆＃39; paterns＆＃39;值？

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用于vue中的ajax。

不幸的是，我浪费了3个小时，因为无论我尝试使用什么代码，数据都没有初始化。

我求助于vue-resource，并且我的代码在第一次工作！

包括vue-resource库，并像这样更改已安装的方法：

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

来自Ajax Request Vue2的Init数据

2 个答案: