So öffnen Sie eine Popup-Liste mithilfe der API-Inhaltswiedergabe in Vue

Question

Ich versuche, ein Popup in einer gerenderten Liste mit benutzerdefiniertem Inhalt aus einer API-Anfrage zu öffnen.

Derzeit habe ich den folgenden Code:

<template>
  <div class="biblio__all">
      <a v-for="i in items" v-bind:key="i.id"
          <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">Fügen Sie den Inhalt des Popup-Fensters hier ein</div>
  </div>

</template>

<script lang="ts">
import { defineComponent } from „vue“;

Standard exportieren defineComponent({
    Daten () {
        zurückkehren{
            Artikel: [],
        }
    },
    erstellt(){
            this.axios.get("///API URL")
            .then(response => (this.items = Response.data.feed.entry))
        },
    Methoden: {
        
    }
        
    })
    
</script>

Ich möchte ein weiteres verstecktes Div im V-for haben und wenn ich auf den Link klicke, erscheint das Popup.

Ich habe alle Daten für das Popup im Items-Array.

Answer 1

你可以为每个项目创建一个单独的组件，并在该组件中处理其模态状态。你可以使用bootstrap、bulma或纯html、css来制作模态框。使用v-show="modalState"来隐藏或显示模态框。在你的子组件中定义modalState：

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>