Vue で API コンテンツレンダリングを使用してポップアップリストを開く方法

Question

API リクエストからのカスタム コンテンツを含むレンダリングされたリストでポップアップを開こうとしています。

現在、次のコードがあります:

<テンプレート>
  <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>

</テンプレート>

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

デフォルトのエクスポートdefineComponent({
    データ （） {
        戻る{
            アイテム: []、
        }
    }、
    作成した（）{
            this.axios.get("///API URL")
            .then(response => (this.items = response.data.feed.entry))
        }、
    メソッド: {
        
    }
        
    })
    
</script>

v-for 内に別の隠し div を置きたいのですが、リンクをクリックするとポップアップが表示されます。

ポップアップのすべてのデータが items 配列にあります。

Answer 1

アイテムごとに個別のコンポーネントを作成し、そのコンポーネントでモーダル状態を処理できます。ブートストラップ、ブルマ、または純粋な HTML と CSS を使用してモーダル ボックスを作成できます。 v-show="modalState" を使用して、モーダル ボックスを表示または非表示にします。子コンポーネントで modalState を定義します:

リーリー

最終的な構造:

リーリー