Cara membuka senarai pop timbul menggunakan pemaparan kandungan API dalam Vue

Question

Saya cuba membuka pop timbul dalam senarai yang diberikan dengan kandungan tersuai daripada permintaan API.

Pada masa ini, saya mempunyai kod berikut:

<template>
  <div class="biblio__all">
      <a v-for="i dalam item"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="tersembunyi">Letakkan kandungan tetingkap timbul di sini</div>
  </div>

</template>

<skrip lang="ts">
import { defineComponent } daripada "vue";

eksport lalai defineComponent({
    data () {
        kembali{
            item: [],
        }
    },
    dicipta(){
            this.axios.get("///URL API")
            .then(respon => (this.item = response.data.feed.entry))
        },
    kaedah: {
        
    }
        
    })
    
</script>

Saya mahu mempunyai satu lagi div tersembunyi di dalam v-for dan apabila saya mengklik pada pautan, pop timbul muncul.

Saya mempunyai semua data untuk pop timbul dalam tatasusunan item.

Answer 1

Anda boleh membuat komponen berasingan untuk setiap item dan mengendalikan keadaan modalnya dalam komponen itu. Anda boleh menggunakan bootstrap, bulma atau html dan css tulen untuk membuat kotak modal. Gunakan v-show="modalState"来隐藏或显示模态框。在你的子组件中定义modalState:

data() {
    return {
        modalState: false
    }
}

Struktur akhir anda:

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

  </div>