具有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 warn]：属性或方法"facts"未在实例，但在渲染过程中被引用。确保这个道具是被动的，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。

Answer 1

在asyncData方法的末尾，事实是一个数组。在asyncData中(就像在正常的vue数据函数中一样(，您需要返回dictionary。

因此它应该如下：

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