帶有Nuxtjs屬性或方法的VueJS未在實例上定義，但在渲染期間被引用

Question

我是VueJS的新手，我想知道這里發生了什么。 以下是我的本教程“ 使用Nuxtjs Firebase進行服務器端渲染”教程中的代碼。 但是當我執行firebase serve時，它輸出以下錯誤。 誰能告訴我這是怎么回事？

<template>
  <ul>
    <li v-for="fact in facts" :key="fact.text">
      {{ fact.text }}
    </li>
  </ul>
</template>

<script>
    import fetch from 'isomorphic-fetch';

    export default {
      async asyncData() {
        const response = await fetch('https://nuxt-ssr.firebaseio.com/facts.json');
        const facts = await response.json();
        return facts;
      }
    }
</script>

錯誤：[Vue警告]：屬性或方法“事實”未在實例上定義，但在渲染期間被引用。 通過初始化屬性，確保在數據選項中或對於基於類的組件，此屬性都是反應性的。

Answer 1

在asyncData方法的末尾，您的事實是一個數組。 在asyncData中（就像在普通的vue數據函數中一樣），您需要返回字典。

因此應如下所示：

export default {
  async asyncData() {
    const response = await fetch('https://nuxt-ssr.firebaseio.com/facts.json');
    const facts = await response.json();
    return {facts}; // Same as return  { facts: facts }
  }
}