I encountered an issue while passing an array of objects from parent to child and looping over it using v-for. The error message "TypeError: Cannot read property 'title' of undefined" keeps appearing.
My parent component is named postsList, while the child component is named Post.
If you'd like to check out the code on codesandbox, here's the link: https://codesandbox.io/s/vue-template-hh0hi
Any ideas on how to resolve this problem?
// Parent
<template>
<div class="hello">
<Post :posts="posts"/>
</div>
</template>
<script>
import Post from './Post'
export default {
name: "PostsList",
data: () => {
return {
posts: [
{ title: 'one', description: 'desc one'},
{ title: 'two', description: 'desc two'}
]
}
},
components: {
Post
},
props: {
msg: String
}
};
</script>
Child
<template>
<div :v-for="post in posts" class="hello">
{{post.title}}
</div>
</template>
<script>
export default {
name: "Post",
props: {
title: { type: String, default: 'asdff' },
posts: {
type: Array,
default: () => []
}
}
};
</script>