Axios Get API Call вызывает непредвиденное поведение

Question

Мой CodePen ниже - это рабочий пример того, что должно происходить.Все там работает как положено.Я использую жестко закодированные данные там.

CodePen: https://codepen.io/anon/pen/XxNORW?editors=0001

Жестко закодированные данные:

info:[
{
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
}
],

Выпуск:

Когда я заменяю жестко запрограммированные данные вызовом get AXIOS, флажки CodePen не работают должным образом.Флажок Все установлен правильно, однако , остальные не .

Я предполагаю, что небольшая задержка загрузки API является причиной этого.

mounted() {
   this.getData(); 
},
methods: {
    getData: function() {
      axios
       .get('https://EXAMPLE.com/API/')
      .then(response => {
        this.info = response.data
        this.dataReady = true
      })
      .catch(error => {
        console.log(error)
       this.errored = true
  })
       .finally(() => this.loading = false)
    }
},

Я не загружаю интерфейс до тех пор, пока данные не будут готовы.

Как я могу исправить эту проблему?

Спасибо.

Answer 1

В вашей демонстрации вызов select() подтверждает функцию «Выбрать все» (отметив все флажки), но эти флажки недоступны до разрешения getData(), поэтому просто переместите select() после getData():

async mounted() {
  await this.getData();
  this.select();
},
methods: {
  async getData() {
    const {data} = await axios.get(/* URL TO API DATA */);
    this.info = data;
  },
  // ...
}

демо

Answer 2

При использовании axios внутри приложения vue js вы используете ключевое слово "this" внутри axios , что не позволяет компилятору определить, для какого объекта вы находитесь.пытаясь сослаться на axios или vue, чтобы решить эту проблему, попробуйте следующий код:

getData: function() {
   let app = this;
  axios
   .get('https://EXAMPLE.com/API/')
  .then(response => {
    app.info = response.data
    app.dataReady = true
  })
  .catch(error => {
    console.log(error)
   app.errored = true
  })
   .finally(() => app.loading = false)
  }

Надеюсь, что это решит вашу проблему.