Question

我正在尝试从我的API响应中打印place.city。我的代码可以工作，但是它会在页面加载时尝试打印event.city，这将导致控制台错误“无法读取null的属性'city'。”

如何在不出现此控制台错误的情况下打印单个场所的API响应？

我查看了Vue生命周期（https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks），尝试了v-if和其他一些我发现使用Google搜索的内容，但似乎没有任何效果。

<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

我发现最可靠的方法是内部处理状态。这样可以提供错误处理和加载反馈。

在我的真实应用程序中，我通常使用enumarate状态并使用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具有类似于已安装的生命周期挂钩，即beforeMounted，基本上可以让您在呈现模板之前执行某些操作，请参见下文：

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

希望它会有所帮助：）

在模板尝试打印数据之前，如何等待API响应？

2 个答案: