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

Question

我用 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

我该如何解决？

Answer 1

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

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

或者，如果您不想添加 'id'

，请更改循环的键 :key="team.name"

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

With Vue.js, How to use a modal component inside v-for loop?

javascript

vue.js

bootstrap-vue