Как обновить переменную данных после вызова Ajax при использовании Vue.js без использования директив v-if?

Question

В настоящее время я делаю v-if="Object.keys(video).length > 0" на div, чтобы гарантировать, что video отправляется только на компонент video-player, когда он действительно доступен.

Если я опускаю проверку v-if, video, инициализированный как null, отправляется компоненту video-player, и видео не загружается, хотя через секунду данные video заполнен URL-адресом от вызова Ajax. Есть ли лучший способ решить эту проблему, не обращаясь к директивам v-if повсеместно?

Answer 1

Вы можете использовать Асинхронные компоненты , он позволяет обрабатывать асинхронный код и разрешать ваш компонент только тогда, когда он готов, также предоставляет расширенные функции для загрузки и обработки ошибок, вот простой пример:

Vue.component('async-component',
  function (resolve, reject) {
    fetch('https://randomuser.me/api/?results=10')
    .then((resp) => resp.json())
    .then(function(data) {
      this.authors = data.results || [];    
      resolve({
        template:
        `
          <div>
            <img 
              v-for="author in authors"
              :src='author.picture.medium' 
            />
          </div>
                `,
        data() {
            authors: []
        }
      });
    });
}); 


var vm = new Vue({
  el: '#app',
  template: 
  `
    <async-component />
  `
});

Вы также можете проверить рабочий пример .