Looking to create an image modal using HTML, CSS, and Vue. As a novice in this area, I am facing an issue where clicking on one image enlarges all of them, instead of just the selected one. This is happening because I am looping through an array for the images. How can I modify the code to only enlarge the clicked image while looping through the array?
<div v-if="visible" class="food__menu">
<a href="#" class="food__list" v-for="food in foods" :key="food">
<div class="food__image">
<img
:src="food.image"
:class="{fullWidthImage : fullWidthImage }"
@click="fullWidthImage = !fullWidthImage"
/>
</div>
<div class="food__details">
<span class="food__name">{{food.name}}</span>
<span class="food__type">{{food.type}}</span>
</div>
</a>
</div>
.fullWidthImage {
width: 300px !important;
height: 400px !important;
display: flex;
position: absolute;
}
.food__image img {
height: 60px;
width: 60px;
}
export default {
data() {
return {
toggle: false,
visible: false,
mealTitle: false,
fullWidthImage: false,
foods: [
{
image: require("../assets/images/food.png"),
name: "potatoes",
type: "Carbohydrate"
},
{
image: require("../assets/images/food1.png"),
name: " rice",
type: "Protein"
},
{
image: require("../assets/images/food2.png"),
name: "Lamb",
type: "Carbohydrate"
},
}
}
}
Trying to achieve something similar to this, but encountering an issue where all images enlarge when clicked. Any guidance would be appreciated! https://i.sstatic.net/8W126.png