属性或方法“posts”未在实例上定义，但在渲染期间引用

Posted 2023-02-22

【中文标题】属性或方法“posts”未在实例上定义，但在渲染期间引用

【英文标题】：Property or method "posts" is not defined on the instance but referenced during render

【发布时间】：2021-04-21 00:58:43

【问题描述】：

我正在尝试复制 vue 教程示例（在此处找到：https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props），但没有成功。下面是我的代码。我有一个名为 TA.vue 的视图，我想将组件导入并渲染。任何想法我做错了什么？

TA.vue（视图）：

<template id="front">
    <b-container style="margin-top: 9rem;">
        <b-row>
            <div id="blog-posts-events-demo" class="demo">
                <div>
                    <blog_post
                        v-for="post in posts"
                        :key="post.id"
                        :title="post.title"
                    ></blog_post>
                </div>
            </div>
        </b-row>

    </b-container>

</template>

<script>
import blog_post from '../components/blog_post' // import the Header component
  export default 
    name: 'talent-acquisition',
    components: 
        blog_post
    
  
</script>

blog_post 组件：

Vue.component('blog_post', 
    el: '#front',
    
    data() 
        return 
            posts: [
                 id: 1, title: 'My journey with Vue',
                 id: 2, title: 'Blogging with Vue',
                 id: 3, title: 'Why Vue is so fun'
            ]
        
    ,
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4> title </h4>
    </div>
  `
)

app.mount('#blog-posts-events-demo')

编辑： 遵循 Amaarrockz 的建议后，出现以下错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <BlogPost> at src/components/blog_post.vue
       <TalentAcquisition>
         <App> at src/App.vue
           <Root>

【参考方案1】：

问题是你在你的子组件（'blog_post'）中定义了数组'posts'，你试图从父组件迭代。 更好的实现是在父组件中定义数组。 请在下面找到修改

TA.vue

<template id="front">
    <b-container style="margin-top: 9rem;">
        <b-row>
            <div id="blog-posts-events-demo" class="demo">
                <div>
                    <blog_post
                        v-for="post in posts"
                        :key="post.id"
                        :title="post.title"
                    ></blog_post>
                </div>
            </div>
        </b-row>

    </b-container>

</template>

<script>
import blog_post from '../components/blog_post' // import the Header component
  export default 
    name: 'talent-acquisition',
    components: 
        blog_post
    ,
data() 
        return 
            posts: [
                 id: 1, title: 'My journey with Vue',
                 id: 2, title: 'Blogging with Vue',
                 id: 3, title: 'Why Vue is so fun'
            ]
        
    ,
  
</script>

blog_post 组件：

Vue.component('blog_post', 
    el: '#front',
  props: ['title'],
  template: `
    <div class="blog_post">
      <h4> title </h4>
    </div>
  `
)

app.mount('#blog-posts-events-demo')

【讨论】：

谢谢，我现在收到一个新错误，我现在已经编辑了原来的问题，你能检查一下吗

我没有在 qsn 中看到你的更新，它仍然保持不变

对不起，我在编辑之前写了评论，请看一下

请检查此链接，看看是否有帮助..

***.com/questions/41983767/…