如何使用Vue.js在响应函数中运行方法

Question

当我从API获得成功响应时，我试图运行一个方法，但该方法没有运行。我在这里做了一个简单的例子来展示。

test((函数应该在我得到响应之后执行，因为它调用了另一个API端点。这是vue.js代码。

var app = new Vue({
el: "#contents",
data: { 
id: null,
details: [],
},

methods: {
fetchProductDetails: function(){
let vue = this;
axios.post("/api/get-details", {
id : id
})
.then(function (response) {
vue.details = response.data;
this.test();
})
.catch(function (error) {});
},

test: function () {
console.log(app.details);
}
},
mounted: function(){
this.fetchProductDetails();
},
});

Answer 1

应该运行vue.test()而不是this.test()，就像使用vue.details = response.data而不是this.details = response.data一样。

在.then()中使用未命名函数时，this不再引用vue应用程序，而是引用未命名函数。您可以使用ES6箭头函数语法来避免将this设置为特定变量，因为箭头函数使用this的父函数范围，而不是将this设置为引用它们自己：

axios.post("/api/get-details", { id: this.id })
.then(response => {
this.details = response.data;
this.test();
})
.catch(error => { console.log(error)});

然而，IE11不支持箭头功能(以及一般的ES6(。因此，如果您需要支持较旧的浏览器，则需要使用Babel将其编译回ES5 JavaScript。