Lord_Dantes
@Lord_Dantes
Чат джунов t.me/developersjunior

Как правильно обработать данные через axious?

код
methods: {
    getProductData() {
      this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    },
    getMediaUrls() {
      this.currentProductData[0].acf.photos.forEach(el => {
        this.media.readyURLs.push(el.photo);
      })
    }
    
  },

1-й метод вызываю при created(), 2-й при mounted(). Ругается на ".acf", я делаю выводы что данные не успевают прогружаться, собственно вопрос как получать данные так чтобы не было ошибок. Спасибо.
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Хуки Vue синхронные. Никто никого не ждёт. Не вызывайте getMediaUrls пока не будет данных.

Если вызов происходит в шаблоне - во-первых: не используйте методы в шаблонах без крайней необходимости: вместо метода getMediaUrls должно быть computed свойство mediaUrls; во-вторых: скрывайте в шаблоне отображение пока не появятся данные: v-if="currentProductData"/v-if="currentProductData.length" и показывайте вместо этого какой-нить loader, Vue не запросит то, что скрыто под v-if пока условие не станет верным.

...upd: посмотрел полный код. Незачем выносить getMediaUrls в mounted и разрывать асинхронную цепочку. Вызывайте его сразу в getProductData, либо если currentProductData может меняться в иных случаях - сделайте, опять же, computed свойством. В крайнем случае можно вызывать его, повесив watch на currentProductData, но computed лучше.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@VegasChickiChicki
async getProductData() {
      await this.axios
        .get('http://church/wp-json/wp/v2/news?slug=' + this.$route.params.slug)
        .then(response => this.currentProductData = response.data);
    }
Ответ написан
Ваш ответ на вопрос

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

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