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

无法从data中传递数据, 错误信息是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. 请问应该如何修改呢?谢谢

Can’t get data from posts.vue. Error message is 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. Could you help me find the reason that cause the problem? Thanks in advance.

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
  <table class="table table-striped mt4">
    <thead>
      <tr>
        <th scope="col">Id</th>
        <th scope="col">Title</th>
        <th scope="col">Body</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="post in posts" :key="post.id">
        <td>{{post.id}}</td>
        <td>{{post.title}}</td>
        <td>{{post.body}}</td>
      </tr>
    </tbody>
  </table>
  </div>
</template>

<script>
import PostsExample from './components/Posts'

export default {
  name: 'App',
  components: {
    PostsExample
  }
}
</script>
<style>
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

#app {

}
</style>

Posts.vue

<script>
export default{
  name: 'PostsExample',
  data () {
    return {
      posts: [
        {id: 1, title: 'Post 1', body: 'kasfjk'},
        {id: 2, title: 'Post 2', body: 'kasfjk'},
        {id: 3, title: 'Post 3', body: 'kasfjk'}
      ]

    }
  }
}
</script>

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!