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

Question

我有这个页面，粘贴来自doc的nuxt示例代码：

<template>
<div>
   {{ posts }}
</div>
</template>

<script>
export default {
  data: () => ({
    posts: []
  }),
  async fetch() {
    this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
  }
}

npm run dev显示

 ERROR  [Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Pages/test.vue> at pages/test.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>

并且没有向 url 提出请求

Answer 1

问题是您没有关闭<script>标记。 这可能会导致这些奇怪的错误（因为您确实在数据中正确定义了帖子。在末尾添加</script>可以解决此问题。

此外，他们在他们的示例中使用了 $http 插件，因此只有在您拥有该插件时调用才会起作用。 您也可以只使用常规的 javascript fetch function 进行外部调用：

<template>
  <div>
    {{ posts }}
  </div>
</template>

<script>
export default {
  data: () => ({
    posts: [],
  }),
  async fetch() {
    const response = await fetch('https://api.nuxtjs.dev/posts');
    this.posts = await response.json();
  },
};
</script>