具有 Nuxtjs 属性 或方法的 VueJS 未在实例上定义，但在渲染期间被引用

Question

我对 VueJS 比较陌生，我想知道这里发生了什么。下面是我在 Server Side Rendering with 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>

error: [Vue warn]: Property or method "facts" is not defined on the instance but referenced during render. Make sure that this prop erty is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

在 asyncData 方法的末尾，您的事实是一个数组。在 asyncData 中（就像在普通的 vue 数据函数中一样）你需要 return 字典。

所以应该是这样的：

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