Comment ouvrir une liste contextuelle à l'aide du rendu de contenu API dans Vue

Question

J'essaie d'ouvrir une fenêtre contextuelle dans une liste rendue avec du contenu personnalisé à partir d'une requête API.

Actuellement, j'ai le code suivant :

<template>
  <div class="biblio__all">
      <a v-for="i dans les éléments" 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 class="hidden">Placez le contenu de la fenêtre contextuelle ici</div>
  </div>

</modèle>

<script lang="ts">
importer {defineComponent} depuis "vue" ;

exporter le composant défini par défaut ({
    données () {
        retourner{
            articles: [],
        }
    },
    créé(){
            this.axios.get("///URL API")
            .then(response => (this.items = réponse.data.feed.entry))
        },
    méthodes : {
        
    }
        
    })
    
</script>

Je souhaite avoir un autre div caché dans le v-for et lorsque je clique sur le lien, la fenêtre contextuelle apparaît.

J'ai toutes les données du popup dans le tableau items.

Answer 1

Vous pouvez créer un composant distinct pour chaque élément et gérer son état modal dans ce composant. Vous pouvez utiliser bootstrap, bulma ou du HTML et CSS purs pour créer des boîtes modales. Utiliser v-show="modalState"来隐藏或显示模态框。在你的子组件中定义modalState :

data() {
    return {
        modalState: false
    }
}

Votre structure finale :

<div class="biblio__all">
      <a v-for="i in items" v-bind:key="i.id" class="biblio__item">
          <!-- 拥有模态框和主要项目代码的组件 -->
          <subitem :item="i" />
      </a>

  </div>