Vue Overlay for specific card - vue.js

Question

I am using Vue with Vuetify and I used a for loop to render 8 different cards. Each card has its own overlay which shows its own image when clicked, however when I click one card, all of the overlays get set off instead of the overlay for just the specific card. How should I go about doing this? Would I have to add an ID for each card?
<script>
export default {
data: () => ({
arts: [
require("#/assets/art1.jpg"),
require("#/assets/art2.jpg"),
require("#/assets/art3.jpg"),
require("#/assets/art4.jpeg"),
require("#/assets/art5.jpg"),
require("#/assets/art6.jpg"),
require("#/assets/art7.jpg"),
require("#/assets/art8.jpg")
],
absolute: true,
opacity: 1,
overlay: false,
})
};
</script>
<template>
<div style="width: 100%; height: 100%">
<v-container fluid style="height:100%; background-color:#fc8276; width:25%; float:left"></v-container>
<v-container style=" height: 100%; width: 75%; float:right" fluid>
<h1>Portfolio</h1>
<v-card
v-for="art in arts"
class="ma-5"
v-bind:key="art"
style="width: 15em; height: 15em; display:inline-flex"
>
<v-img :src="art" v-on:click="overlay=true"></v-img>
<v-overlay :absolute="absolute" :opacity="opacity" :value="overlay">
{{art}}
</v-overlay>
</v-card>
</v-container>
</div>
</template>

Answer 1

This is untested, but something like this should work... basically restructure your data a bit. Right now you have one overlay data boolean. Whenever you are setting this to true, you are setting it to true for everything that is using that same boolean... in your case all of your overlayables are looking at that same boolean.
Also I would recommend moving your styles into CSS classes, it will make this way more readable...
You need to update your HTML to this:
<template>
<div style="width: 100%; height: 100%">
<v-container fluid style="height:100%; background-color:#fc8276; width:25%; float:left"></v-container>
<v-container style=" height: 100%; width: 75%; float:right" fluid>
<h1>Portfolio</h1>
<v-card
v-for="(art, index) in arts"
class="ma-5"
v-bind:key="index"
style="width: 15em; height: 15em; display:inline-flex"
>
<v-img :src="art" v-on:click="showOverlay(art, index)"></v-img>
<v-overlay :absolute="absolute" :opacity="opacity" :value="art.overlay">
{{art.asset}}
</v-overlay>
</v-card>
</v-container>
</div>
</template>
Then change your data a bit:
data: () => ({
arts: [
{ asset: require("#/assets/art1.jpg"), overlay: false },
{ asset: require("#/assets/art2.jpg"), overlay: false },
{ asset: require("#/assets/art3.jpg"), overlay: false },
{ asset: require("#/assets/art4.jpeg"), overlay: false },
{ asset: require("#/assets/art5.jpg"), overlay: false },
{ asset: require("#/assets/art6.jpg"), overlay: false },
{ asset: require("#/assets/art7.jpg"), overlay: false },
{ asset: require("#/assets/art8.jpg"), overlay: false }
],
absolute: true,
opacity: 1,
})
Then in your methods:
methods: {
showOverlay(art, index) {
this.arts.map((a) => a.overlay = false);
this.arts[index].overlay = true;
}
}

Answer 2

I would make a new component which holds the v-card, so each one would have its own overlay data property. But having it all in one component with arts.length overlay variables works as well