Область видимости VUE JS, обращение из функции к элементу data?

Question

[Tereverda]

не могу получить доступ к элементу data внутри функции.

<button v-on:click="search_boxes" type="button" class="btn btn-primary btn-lg">

var app = new Vue({
    el: '#app',
    delimiters: ['{%', '%}'],
    data: {
        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); });
        }
    },
});

Функция get_boxes срабатывает, понятно что у стрелочных функций нет контекста.
Но как получить доступ к this.boxes из функции search_boxes?

console.log(this);
console.log(this.boxes.length);
console.log(this.boxes);
Выдают корневой объект VUE

Answer 1

[Дмитрий Гололобов]

data должна быть функцией, возвращающей объект!!!

delimiters: ['{%', '%}'],
 data () {
  return {
      // Служебные переменные
        errors: [],       // массив с ошибками
        alert: '',        // обложка текста с ошибками
        error_length: '', // подсвечивание инпута длина
        // ... остальные св-ва
   }
},
 methods: {
   // ваши методы
}

Comments

[Tereverda]

так тоже делал не работает

[sinneren]

быть не может. console.log(this.boxes); будет показывать массив. другое дело, какой именно, т.к. get_boxed содержит асинхронщину

[Tereverda]

sinneren, да, вы правы разобрался с этим

Answer 2

[Tereverda]

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