I can’t access variables from inside the function VUE JS

I can’t access variables from inside the function, how to do it in the data scope? Only an empty global this object appears in the console.

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); });
    }
},

});

Answer

axios.get() is an async function that returns a promise. So when you call get_boxes() it proceeds instantly without waiting for the response. Therefore your logs are showing the empty boxes variable

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); });
    }
},

By turning the search_boxes() function into an async one, we can await the promise of the response. So when we call this.get_boxes() we gonna wait until the data is stored in this.boxes.