@Tereverda

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

не могу получить доступ к элементу 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
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 2
@dGololobov
начинающий
data должна быть функцией, возвращающей объект!!!

delimiters: ['{%', '%}'],
 data () {
  return {
      // Служебные переменные
        errors: [],       // массив с ошибками
        alert: '',        // обложка текста с ошибками
        error_length: '', // подсвечивание инпута длина
        // ... остальные св-ва
   }
},
 methods: {
   // ваши методы
}
Ответ написан
@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); });
        }
    },
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы