Property or method "info" 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,

源代码
App.Vue


<template>
  <div>
    <test v-for="post in posts" v-bind:title="post.title">
    </test>
  </div>


</template>

<script>
//import HelloWorld from './components/HelloWorld'/*要使用哪个模块就要显示调用声明*/
import test from './View/test'

export default {/*导出的是整个MVVM框架的信息*/
  name: 'App',/*这个是组件的name*/
  components: {/*组件的引入*/
    test
  },
 
}
</script>

<style>

</style>

test.vue

<template>
  <div>
    <h1>{{title}}</h1>
  </div>

</template>

<script>


export default {
  name:'test',
  props:['title'],
  data(){
    return {
      posts:[
        {id:1,title:'one'},
        {id:2,title:'two'},
        {id:3,title:'three'}
      ],
      
    }
  }
}
</script>

<style scoped>

</style>

我在App.vue中取了test.vue的值,所有浏览器会报posts没有定义
解决方法
将test.vue中data()方法转移到App.vue中

App.vue

<template>
  <div>
    <test v-for="post in posts" v-bind:title="post.title">
    </test>
  </div>


</template>

<script>
//import HelloWorld from './components/HelloWorld'/*要使用哪个模块就要显示调用声明*/
import test from './View/test'

export default {/*导出的是整个MVVM框架的信息*/
  name: 'App',/*这个是组件的name*/
  components: {/*组件的引入*/
    test
  },
  data(){
    return {
      posts:[
        {id:1,title:'one'},
        {id:2,title:'two'},
        {id:3,title:'three'}
      ],

    }
  }

}
</script>

<style>

</style>

test.vue

<template>
  <div>
    <h1>{{title}}</h1>
  </div>

</template>

<script>


export default {
  name:'test',
  props:['title'],
}
</script>

<style scoped>

</style>
posted @ 2022-03-01 09:26  小罗要有出息  阅读(350)  评论(0编辑  收藏  举报