javascript - 使用 Vue.js，如何在 v-for 循环中使用模态组件？

问题描述

我用 vue-Bootstrap 制作了 v-for 循环卡。

在状态中，有假人。像这样。

 myTeams: [
{name: "T1", img: "https://placekitten.com/300/300" , nickname: "", followers: 14565, category: "lol"},
{name: "ManU", img: "https://placekitten.com/300/300" , nickname: "", followers: 1234, category: "football"},
{name: "Chelsea", img: "https://placekitten.com/300/300" , nickname: "", followers: 76567, category: "baseaball"},

这是我的 vue.js 代码

<template>
  <div>
    <br>
    <b-card-group columns deck>
        <br>
        <br>
        <b-card 
          v-b-modal.modal-1
          v-for="(team, idx) in myteams"
          :key = "idx"
          :team="team"
          :src = "team.img"
          border-variant="success"
          tag="article"
          style="max-width: 15rem;"
          class="mb-2"
        >
          <b-container>              
            <b-avatar 
            :src="team.img" 
            size="6rem"
            class="d-flex"
            >
            </b-avatar>
            <br>
            <b-card-title>
            <div v-if="team.nickname.length === 0">{{ team.name }}</div>
            <div v-else>{{ team.nickname }}</div>
            </b-card-title>
              <b-card-text>
                {{ team.followers }} people like this team.
              </b-card-text>
            <b-button pill variant="danger" size="sm">delete</b-button>
      
          </b-container>
          <b-modal id="modal-1" :title="team.name">
            <p class="my-4">{{team}}</p>
          </b-modal>
        </b-card>       
    </b-card-group>
  </div>
</template>

和js

<script>
import { mapState } from 'vuex'

export default {
  name: 'MyMyTeam',
  computed: {
   ...mapState({
     myteams: 'myTeams'
   })
  },

}

我只是希望每张卡都有自己的模态 ex) 当我单击ManU卡时，只会激活一个模态并且它有ManU数据但是在我的代码中，当我单击一张卡时，激活了 3 个模态.... T1，ManU，Chelsea

我怎样才能解决它？

标签： javascriptvue.jsbootstrap-vue

javascript - 使用 Vue.js，如何在 v-for 循环中使用模态组件？

问题描述

解决方案

推荐阅读