This code snippet contains the template and path information.
<template>
<div class="">
<c1 :text="message1"></c1>
<c1 :text="message2"></c1>
</div>
</template>
<script>
import c1 from '../components/c1.vue'
export default {
components: {c1},
data () {
return {
message1: 'hello world1',
message2: 'hello world2',
}
}
}
path : ./pages/index.vue
---------------------------------------------------
<template>
<div>
<h1>c1 component</h1>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>
path : ./components/c1.vue
An error has occurred in the output of this code.
ERROR [Vue warn]: Property or method "message1" 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/index.vue> at pages/index.vue
<Nuxt>
<.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
<Root>
ERROR [Vue warn]: Property or method "message2" 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/index.vue> at pages/index.vue
<Nuxt>
<.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
<Root>
I am learning from a tutorial. I'm confused why 'message1' and 'message2' are undefined. Could this be due to a syntax mistake? The version of nuxt being used is 2.6.3. Could it be related to the version? Please advise me on how to resolve this issue.