The window opens, but instead of showing the image I clicked on, it displays the last image in the table. How can I fix this error? Below are my modal and map templates, which are the parent components of the modal. Thank you.
<template>
<div class="modal-box" v-if="revealed">
<div class="overlay"></div>
<div class="modal card">
<div @click="toggleModal()" class="btn-modal btn btn-danger">
X
</div>
<h2>modal window</h2>
<div><slot> </slot></div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: ["revealed", "toggleModal"],
methods: {},
};
</script>
<style>
.modal-box {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.overlay {
background: rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.modal {
background: white;
position: fixed;
padding: 50px;
}
.btn-modal {
position: absolute;
top: 10px;
right: 10px;
}
</style>Here is the parent component:
<template>
<div>
<div>
<div
class="pb-5 mx-5 px-5 d-flex flex-wrap justify-content-around align-items-center "
>
<div
v-for="(image, id) in images"
:key="id"
class=" my-5 col-8 col-lg-4"
>
<div class="border-card shadow-card card ">
<div role="button" @click="toggleModal(image)">
<img
class="top-img card-img-top"
:src="image.link"
alt="photo-onMySite"
/>
</div>
<modal v-bind:revealed="revealed" v-bind:toggleModal="toggleModal">
<img :src="image.link" :class="`img-id--${id}`" alt="" />
</modal>
<div class="bg-secondary topDivColor"></div>
<div class="card-body">
<h5 class="card-title">{{ image.name }}</h5>
<button @click="toggleShow(image)" class="btn btn-secondary">
Details
</button>
<p :id="image.id" class="hidden pt-3 card-text"></p>
<button
class="ml-3 btn-card btn-secondary"
@click="clickLink(image)"
>
View Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Modal from "./imageModal.vue";
export default {
name: "card",
components: {
modal: Modal,
},
data() {
return {
revealed: false,
images: [
// array of images with their details
],
};
},
methods: {
// methods for showing, hiding, and clicking images
},
};
</script>
<style lang="scss">
.top-img {
height: 370px;
}
.topDivColor {
height: 40px;
width: 100%;
}
.border-card {
border: 0.5mm ridge#a6b622ff !important;
}
.shadow-card:hover {
box-shadow: 0 0 0 0 #748928ff;
animation: pulse 1.3s infinite;
}
.shadow-card {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.hidden {
display: none;
}
@keyframes pulse {
to {
box-shadow: 0 0 0 18px rgba(0, 0, 0, 0.01);
}
}
</style>The last link in the image array is displayed in the modal window, but I want the clicked image link to be displayed instead. https://i.sstatic.net/gj1yw.png