What is causing the issue with iterating inside the component template in the code above?
<!DOCTYPE html>
<html>
<head>
<title>Exploring Vue components</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
</style>
</head>
<body>
<div id="blog-post-demo">
<blog-post :posts="posts"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['posts'],
template: `
<div class="blog-post" v-for="post in posts">
<h3> {{ post.title }}</h3>
<button>Enlarge text</button>
<div v-html="post.content"></div>
</div>`,
})
new Vue({
el : '#blog-post-demo',
data : {
posts : [
{id: 1, title : 'My Journey to Africa', content : 'I am the post'},
{id: 2, title : 'My Journey to America', content : 'I am the post'},
{id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
{id: 4, title : 'My Journey to Asia', content : 'I am the post'},
],
}
})
</script>
</body>
</html>The second code snippet above is functioning correctly, but it is unclear why the first one is not working as expected. Can anyone provide insight into this issue?
<!DOCTYPE html>
<html>
<head>
<title>Exploring Vue components</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="blog-post-demo">
<blog-post v-for="post in posts" :post="post"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3> {{ post.title }}</h3>
<button>Enlarge text</button>
<div v-html="post.content"></div>
</div>`,
})
new Vue({
el : '#blog-post-demo',
data : {
posts : [
{id: 1, title : 'My Journey to Africa', content : 'I am the post'},
{id: 2, title : 'My Journey to America', content : 'I am the post'},
{id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
{id: 4, title : 'My Journey to Asia', content : 'I am the post'},
],
}
})
</script>
</body>
</html>