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

【问题标题】：With Vue.js, How to use a modal component inside v-for loop?使用 Vue.js，如何在 v-for 循环中使用模态组件？
【发布时间】：2021-05-10 07:39:02
【问题描述】：

我用 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'
   })
  },

}

我只想每张卡片都有自己的模式例如）当我点击ManU 卡时，只会激活一个模式，它有ManU 数据但在我的代码中，当我点击一张卡片时，激活了 3 个模态...... T1，ManU，Chelsea

如何解决？

【问题讨论】：

1.您是否尝试将您的模态移出v-for 循环？ 2. 您正在创建具有相同id 的模态。所以 3 个元素得到相同的 id
我不知道如何在v-for循环之外使用team数据，我会尝试使用id来使用模态

标签： javascript vue.js bootstrap-vue

【解决方案1】：

尝试在你的 Array 中添加 'id'，并将 Array 的 ID 作为 Key。

v-for="team in myteams"
:key="team.id"

或者，如果您不添加'id'，请更改循环键：key="team.name"

【讨论】：