Я пытаюсь напечатать venue.city из моего ответа API. Мой код работает, но он пытается напечатать venue.city при загрузке страницы, это выдает консольную ошибку "Не удается прочитать свойство 'city' из 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>
0
Remco Bravenboer 12 Апр 2019 в 17:21

2 ответа

Лучший ответ

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

В моих реальных приложениях я обычно использую 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>
1
Daniel 12 Апр 2019 в 14:38

У 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
    });
}

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

0
Filipe Costa 12 Апр 2019 в 15:05