Using component with one props - vue.js

Question

I am reading Vuejs documentation and I can say it is confusing. without running example or complete examples they have snippets, I am trying to understanding about using one prop instead of using a each for every property. I am trying to make a example from the docs but I cannot. Following is my code.
Vue.component('blog-post', {
props:['post'],
template:`
<div class="blog-post">
<h3>{{ post.title }}</h3>
</div>
`
})
new Vue({
el : '#app',
data: {
}
})
HTML
<div id="app">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
The error I am getting is "[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render". I am confused on how one value can be used to show many objects.

Answer 1

props:['post'] check this plural. I figure that you are passing an array of posts to the component, and inside that component iterate over it.

Answer 2

You need top pass data.
Vue.component('blog-post', {
props:['post'],
template:`
<div class="blog-post">
<h3>{{ post.title }}</h3>
</div>
`
})
new Vue({
el : '#app',
data: {
posts: [
{
title: 'post-1'
},
{
title: 'post-2'
},
{
title: 'post-2'
}
]
}
})
so now
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
you can use v-for and it will take posts data and iterate through it and pass single post to the component and component will use that property and render html.
here when blog-post will receive post it will be this [ v-bind:post="post" ]
{
title: 'post-1'
}
and it will use its post.title
v-for it will iterate this blog-post component [in our case 3 times] and pass each post object which is in array as post property of blog-post component.
if any doubts please comment.

Answer 3

Not sure I understand the question but I'll try to help:
The reason you get the error is because you are looping posts, but you haven't defined them anywhere, so you need to change your main instance data:
new Vue({
el : '#app',
data: {
posts: [{author: "someone", text: "something", title: "Some post"}]
}
})
There is a shorthand for v-bind, so instead you can write:
<div id="app">
<blog-post
v-for="post in posts"
:key="post.id"
:post="post"
></blog-post>
</div>