Vue中使用API​​內容渲染的彈出清單的開啟方式

Question

我正在嘗試在渲染的清單中使用來自API請求的自訂內容打開彈出視窗。

目前，我有以下程式碼：

<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 class="hidden">這裡放彈出視窗的內容</div>
  </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>

我希望在v-for中有另一個隱藏的div，當我點擊連結時，彈出視窗出現。

我在items數組中有彈出視窗的所有資料。

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>