I created a list of divs using v-for. When a user clicks on one of the divs, a modal window opens to display more details about that specific div.
<PlayerModal :player="selectedPlayer" />
<div v-for="player in players" ...>
<div @click="openModal(player)">
{{ player.name }}
</div>
...
</div>
The modal makes a get request to retrieve additional information and saves it so that when the modal is closed and opened again, the cached information is displayed. I tried using a keep-alive tag for this purpose, but I'm unsure how to handle dynamic rendering of information from different divs into a single modal component.
One approach I considered was to have one modal-component per div, each with its own keep-alive tag. However, since all modal components would have the same name, I'm not sure how to toggle them on and off individually.
<div v-for="player in players">
<keep-alive>
<PlayerModal :player="player" :is=" ??? " />
</keep-alive>
</div>
Any advice or assistance on this matter would be greatly appreciated! Thank you!