Не могу обратить к элементу динамического массива в mounted() Vue.js

Question

При монтировании компонента через axios подгружаю для select-a список значений.

mounted() {
  this.getUnits();

  //this.form.unit_id = this.units[0].id;
  //console.log(this.units[0].id);
},

Но не могу присвоить переменной значение первого элемента массива ((( Получаю ошибку: [Vue warn]: Error in mounted hook: "TypeError: this.units[0] is undefined"

Почему он числится как не определённый, если он уже определён? Если после выполнения getUnits массив заполняется значениями.

 getUnits: function() {
   axios.get('/units/get-units')
     .then((response) => {
       this.units = response.data.units})
     .catch(function (error) {
       console.log(error);});
   // console.log(this.units[0].id);
   // this.form.unit_id = this.units[0].id;
}

Если обращаюсь к элементы массива после, то всё работает

testUnit: function () {
  console.log(this.units[0].id);
},

В чём проблема не пойму ((

Answer 1

Потому что Вы не ждете выполнения функции, при том что она асинхронная. То что Вы подождали ajax не значит что родительская функция об этом знает! Ниже код как можно исправить проблему

async mounted() {
  await this.getUnits(); //либо так
  this.form.unit_id = this.units[0].id;
  console.log(this.units[0].id);
  
  //Либо так если используете Promise
  this.getUnits().then(() => {
    this.form.unit_id = this.units[0].id;
    console.log(this.units[0].id);
  })

  
},

//Либо используйте promise чтобы вернуть значения  результате асинхронной операции либо async/await синтаксис! (как выше)

getUnits: function() {
  return new Promise((resolve, reject) => {
    axios.get('/units/get-units')
     .then((response) => {
       this.units = response.data.units;
       resolve();
     })
     .catch(function (error) {
       console.log(error);
       reject(error);
     });
  })
}

БЛОГ НА HUSL

Не могу обратить к элементу динамического массива в mounted() Vue.js

Ответы (1 шт):