时间戳

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

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

问题描述

我对 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 警告]：属性或方法“事实”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

标签： vue.jsnuxt.js

解决方案

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

推荐阅读