Question

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

2022-09-16

733

javascript vue.js nuxt.js

我有这个页面，从文档中粘贴一个 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 函数进行外部调用：

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