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

Question

我制作了v-for循环卡，带有ve - bootstrap。

状态下，有假人。这样的。

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

如何解决?

Answer 1

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

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

或者，更改循环的键:key="team.name"如果你不添加'id'