[Vuejs]-Hello problem modal window I want to insert the right image when clicking on the image but it always returns the same image what's solution?

by

0👍

Your toggleModale method does not accept an image parameter – it controls the revele property for all of your modals. I think you will need to create a openModalId variable in your parent to store the value of the currently-open modal, and initialise this to 0. Then pass the image ID to your toggleModale method:

Template:

<div role="button" @click="toggleModale(id)">
...
<modale :revele="openModalId === id" @toggleModale="toggleModale">

Method:

toggleModale(imageId) {
  this.openModalId = imageId;
}

You would need to pass the image ID into modaleImage.vue too and call toggleModale(id) from inside that component. Or, even better, update that component to use an $emit instead:

modaleImage.vue:

<div @click="$emit('toggle')" class="btn-modale btn btn-danger">
  X
</div>

Parent:

<modale :revele="openModalId === id" @toggle="toggleModale(id)">

Leave a comment