Как мне ждать ответа API, прежде чем мой шаблон попытается напечатать данные?

Question

Я пытаюсь распечатать venue.city из моего ответа API. Мой код работает, но он пытается напечатать venue.city при загрузке страницы, это выдает консольную ошибку "Невозможно прочитать свойство 'city' of null".

Как я могу напечатать свой ответ API для одного объекта без получения этой ошибки консоли?

Я посмотрел на жизненный цикл Vue (https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks), Я пробовал v-if и некоторые другие вещи, которые я обнаружил, прибегая к помощи, но, похоже, ничего не работает.

<template>
    <div class="venue">
        <div>
            test: {{ venue.city }}
        </div>

    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "Venue",
        data() {
            return {
                venue: null
            }
        },
        mounted() {
            console.log(this.$route.params.id);
            axios.get("http://localhost:8080/venues/" + this.$route.params.id)
                .then(response => (this.venue = response.data))
                .catch(error => (console.log(error)));
        }
    }
</script>

Answer 1

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

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

<template>
  <div class="venue" v-if="loadState === 'DONE'">
    <div>test: {{ venue.city }}</div>
  </div>
  <div class="error-message" v-else-if="loadState === 'ERROR'">
    Ooops. Something happened
  </div>
  <div class="loading-message" v-else>
    Loading...
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Venue",
  data() {
    return {
      venue: null,
      loadState: null,
    };
  },
  mounted() {
    console.log(this.$route.params.id);
    this.loadState = 'LOADING';
    axios
      .get("http://localhost:8080/venues/" + this.$route.params.id)
      .then(response => {
        this.venue = response.data;
        this.loadState = 'DONE';
      })
      .catch(error => {
        this.loadState = 'ERROR';
        console.log(error)
      });
  }
};
</script>

Answer 2

Vue имеет хук жизненного цикла, похожий на смонтированный, то есть beforeMounting, который в основном позволяет вам сделать что-то перед визуализацией шаблона, см. Ниже:

beforeMounted () {
  console.log(this.$route.params.id);
  axios.get("http://localhost:8080/venues/" + this.$route.params.id)
    .then(response => (this.venue = response.data))
    .catch(error => (console.log(error)));
}

Вы также можете использовать переменную загрузки, которая обновляется в вашем then и catch, а затем вы условно отображаете шаблон на основе этой переменной загрузки, например:

<template>
 <div>
  <div v-if="loading">loading...</div>
  <template v-else>
    <div class="venue" v-if="loadState === 'DONE'">
      <div>test: {{ venue.city }}</div>
    </div>
    <div class="error-message" v-else-if="loadState === 'ERROR'">
      Ooops. Something happened
    </div>
    <div class="loading-message" v-else>
      Loading...
    </div>
   </template>
 </div>
</template>

Тогда в вашем JS:

beforeMounted () {
  console.log(this.$route.params.id);
  axios.get("http://localhost:8080/venues/" + this.$route.params.id)
    .then(response => (){
      this.loading = false
    })
    .catch(error => () {
      this.loading = false
    });
}

Надеюсь, это поможет:)