Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

Question

This is my source code and path.

<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

This is result of error.

 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 study with a book. Why are not 'message1' and 'message2' defined? Is this a syntax error? Note that the version of nuxt is 2.6.3. Is it a version issue? Please tell me how to fix it.

Answer 1

检查您的脚本标签是否在 index.vue 文件中正确关闭