VueJS: How to pass data to a components from a v-for list

Viewed 146

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

1 Answers

your architecture is a little strange to be honest but i made you a working Sandbox

CodeSandbox

please check the code first and if you need help understanding i will explain you what i did.

Related