not属性或方法不是在实例上定义的，而是在呈现期间引用的。
not属性或方法不是在实例上定义的，而是在呈现期间引用的。
提问于 2022-09-16 15:40:10
我有一个页面，粘贴文档中的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>也没有向网址提出任何要求
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-16 19:32:02
问题是您没有关闭您的<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73747260
复制相关文章
相似问题
腾讯云开发者
