时间戳

首页 > 解决方案 > 我无法从函数 VUE JS 内部访问变量

javascript - 我无法从函数 VUE JS 内部访问变量

问题描述

我无法从函数内部访问变量，如何在数据范围内访问？控制台中只出现一个空的全局 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); });
    }
},

});

标签： javascriptvue.js

解决方案

axios.get()是一个返回承诺的异步函数。因此，当您调用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.

推荐阅读