Code Snippet in My Home.vue File:
<template>
<div>
<my-post
v-for="(post, index) in posts"
:post="post"
:index="index"
:key="post.id"
></my-post>
</div>
</template>
<script>
import Post from './Post.vue';
export default {
data() {
return {
posts: []
}
},
mounted() {
axios.get('http://localhost/mine/test')
.then(response => {
this.posts = response.data.posts;
})
.catch(error => {
// console.log(error);
})
},
components: {'my-post': Post}
}
</script>
Code Snippet in My Post.vue File:
<template>
<div class="post">
<!-- The content of the post...
I want to count the number of likes for each post here something like this:
<p>{{likes.length}}</p> -->
</div>
</template>
<script>
export default {
props: ['post'],
data() {
return {}
}
}
</script>
The data retrieved by
axios.get('http://localhost/mine/test')posts: Array [
{0:first_name:'example123',post_id:1},
{1:first_name:'example456',post_id:2},
{2:first_name:'example789',post_id:3},
],
likes: Array [
{0:first_name:'example1',post_id:1},
{1:first_name:'example2',post_id:1},
{2:first_name:'example3',post_id:1},
]
Note that posts and likes are separate entities. They are not related as parent-child.
Even though I passed likes as props similar to posts, it displays the same number of likes for all posts. How can I display the correct number of likes for each post?
Thank you