<p>J'essaie d'ouvrir une fenêtre contextuelle dans une liste rendue avec du contenu personnalisé à partir d'une requête API. </p> <p>Actuellement, j'ai le code suivant : </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Je souhaite avoir un autre div caché dans le v-for et lorsque je clique sur le lien, la fenêtre contextuelle apparaît. </p> <p>J'ai toutes les données du popup dans le tableau items. </p>

data() {
    return {
        modalState: false
    }
}

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

  </div>