This is my first question on Stack Overflow so I will try my best.
I'm building a an Vue application and I render a list of object coming from an API in a css grid, and when I click on a picture, I open a modale that show the full picture and some information about it, in clear, it's a copy of Instagram.
So the modale is a reusable components, and I use props for sending the data from the parent to the component child. And here is my problem, because I send the full list of data to the props and not only the information of the picture on which I clicked.
Is it possible to send only the information on the element I click, I know that it's possible with router-link but how to do it with props ?
here the code of the parent element:
<ul v-for="post in doc.posts" :key="post.id">
<button v-on:click="toggleModale">
<modal
v-bind:revele="revele"
v-bind:toggleModale="toggleModale"
v-bind:media_url="post.media_url"
v-bind:like_count="post.like_count"
></modal>
<div class="post">
<img class="postImage" :src="post.media_url" alt="" />
</div>
</button>
</ul>
and the code of the child components modal :
<template>
<div v-if="revele" class="container">
<div class="overlay" v-on:click="toggleModale"></div>
<div class="modal">
<button class="btnCls" v-on:click="toggleModale">X</button>
<h2>Je suis un modal</h2>
<div class="image"><img :src="media_url" alt=""></div>
<div class="text">{{like_count}}</div>
</div>
</div>
</template>
<script>
export default {
name: "modal",
props: ['revele', 'toggleModale', 'media_url', 'media_type', 'like_count', 'comments_count', 'timestamp', 'permalink', 'id'],
created() {
console.log("test modal props id",this.id) //undefined;
},
};
</script>
thanks in advance for your help
UPDATE the code sandbox :
https://codesandbox.io/s/boring-andras-tmyqc?file=/src/App.vue