Question

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

2018-08-02

5780

vue.js nuxt.js

我对 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>

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 数据函数中一样），您需要返回字典。

因此它应该如下所示：

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