I'm attempting to generate a pop-up within a displayed list using custom content retrieved from an API request.
Currently, my code looks like this:
<template>
<div class="biblio__all">
<a v-for="i in items" v-bind:key="i.id" class="biblio__item">
<div class="biblio__text">
<h3 class="biblio__title">{{ i.gsx$titre.$t }}</h3>
<p class="biblio__author">{{ i.gsx$auteur.$t }}</p>
</div>
</a>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return{
items: [],
}
},
created(){
this.axios.get("///API URL")
.then(response => (this.items = response.data.feed.entry))
},
methods: {
}
})
</script>
What I am aiming for in the v-for loop is to include another hidden div and show it as a popup when clicking on the link.
All the necessary data for the pop-up is already stored in the items array.