我不能从函数内部访问变量,如何在数据作用域中访问?控制台中只显示一个空的全局this对象。
var app = new Vue({
el: '#app',
delimiters: ['{%', '%}'],
data: function () {
return {
boxes: [],
}
},
methods: {
// Обработчик кнопки
search_boxes: function (event) {
if(this.boxes.length == 0) {
this.get_boxes();
console.log(this);
console.log(this.boxes.length);
console.log(this.boxes);
}
console.log(this.boxes);
},
get_boxes: function () {
axios.get('/api/get_boxes')
.then(response => { this.boxes = response.data; })
.catch(e => { console.log(e); });
}
},
});
发布于 2021-06-24 15:02:40
axios.get()
是一个返回promise的异步函数。因此,当您调用get_boxes()
时,它会立即执行,而无需等待响应。因此,您的日志显示为空的boxes
变量
var app = new Vue({
el: '#app',
delimiters: ['{%', '%}'],
data: function () {
return {
boxes: [],
}
},
methods: {
// Обработчик кнопки
search_boxes: async function (event) {
if(this.boxes.length == 0) {
await this.get_boxes();
console.log(this);
console.log(this.boxes.length);
console.log(this.boxes);
}
console.log(this.boxes);
},
get_boxes: function () {
return axios.get('/api/get_boxes')
.then(response => { this.boxes = response.data; })
.catch(e => { console.log(e); });
}
},
通过将search_boxes()
函数转换为异步函数,我们可以等待响应的承诺。所以当我们调用this.get_boxes()
时,我们要等到数据存储在this.boxes
中。
https://stackoverflow.com/questions/68118034
复制相似问题