[英]Nuxt property or method is not defined on the instance but referenced during render
I have this for a page, paste of a nuxt example code from doc:我有这个页面,粘贴来自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
shows 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>
and no requests made to the url并且没有向 url 提出请求
The problem is that you don't close your <script>
tag.问题是您没有关闭
<script>
标记。 This can cause these kind of weird errors (because you do have posts correctly defined in data. Adding a </script>
at the end fixes this.这可能会导致这些奇怪的错误(因为您确实在数据中正确定义了帖子。在末尾添加
</script>
可以解决此问题。
Also, they are using a $http plugin in their example, so the call will only work if you have that plugin.此外,他们在他们的示例中使用了 $http 插件,因此只有在您拥有该插件时调用才会起作用。 You can also just use the regular javascript
fetch
function to make external calls:您也可以只使用常规的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.