Асинхронный вызов JS печатает нормально, но выдает «неопределенную» ошибку - PullRequest
Новая
       7

Асинхронный вызов JS печатает нормально, но выдает «неопределенную» ошибку

0 голосов
/ 28 мая 2018

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

У меня есть асинхронный вызов базы данных (в файле controller.js), которая должна вернуть все игры изтаблицу «Игры» и сохраните ее в переменной «allGames» типа Array: 

async getAllGames ({ request, response }) {
  const allGames = await Game.all()
  return response.json({
    status: 'success',
    data: allGames
  })
}

Когда страница загружена, выполняется функция fetchAllGames: 

created () {
  this.fetchAllGames(this.myCallback)
},
methods: {
  myCallback (response) {
    this.allGames = response
  },
  fetchAllGames (callback) {
    axios
      .get('/fetch_games')
      .then(response => {
        callback(response.data.data)
      })
  }
}

Все кажетсяхорошо, и здесь я должен отметить, что я использую VueJS.

Когда я пытаюсь напечатать 'allGames', используя

{{allGames}}

он работает, как и ожидалось, показывая массив всех игр из базы данных.

Если я попытаюсь

{{allGames [1]}}

Я получаю вторую игру, также как и ожидалось.

Если я попытаюсь

{{allGames [1] .id}}

Я получуидентификатор второй игры с горячей перезагрузкой.Теперь, если я вручную перезагружаю страницу, хотя идентификатор все еще отображается на странице, я получаю

[Vue warn]: Ошибка при рендеринге: «TypeError: _vm.allGames [1] не определено«

в консоли.

Моя проблема с этим заключается в том, что мне нужно передать« allGames »другому Компоненту, и сейчас я передаю« undefined ».

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

1 Ответ

0 голосов
/ 28 мая 2018

Если вы используете {{ allGames[1].id }} VueJS мгновенно пытается визуализировать идентификатор первого элемента, который еще не существует при первоначальной визуализации страницы, поскольку данные все еще загружаются в фоновом режиме.

Вам нужно либо использовать директиву v-for, либо охранять рендеринг {{ if allGames.length ? allGames[1].id : '' }}

В отношении горячей перезагрузки: горячая перезагрузка работает иначе, чем обновление страницы.Я не эксперт, но я предполагаю, что данные VueJS не очищаются должным образом, когда части сайта загружаются в горячем режиме

...