在 v-for 之后将模态绑定到相应的按钮

Question

在使用 v-for 显示多个模式后，我试图将 vue bootstrap 模式绑定到它的按钮：

这是我的代码：

<template>
  <div>
    <b-container fluid>
      <b-row>
        <b-col xs="12" sm="12" md="6" lg="4" v-for="project in projects" v-bind:key="project.id">
          <p>
           {{ project.body }}
          </p>
          <b-button variant="primary" v-b-modal.myModal>Go somewhere</b-button>
          <b-modal id="myModal" size="lg" title="Large Modal" centered >
            Hello Modal!
          </b-modal>
        </b-col>
      </b-row>
  </b-container>
  </div>
</template>

<script>
  import jsonProjects from '@/data/projects.json'

  export default {
    name: 'Grid',
    data () {
      return {
        projects: jsonProjects
      }
    }
  }
</script>

通过此设置，当我单击单个按钮时，所有模态都已打开，因此我的问题是如何使用数据 id 动态地将“vb-modal.myModal”绑定到 id="myModal"。

数据是简单的json格式。

谢谢你们。

Answer 1

正如 Belmin 所说，您应该使用唯一的 ID。

动态 vb-modal 值 <b-button v-b-modal="'myModal' + project.id">

动态标识 <b-modal :id="'myModal' + project.id">

<template>
    <div>
        <b-container fluid>
            <b-row>
                <b-col xs="12" sm="12" md="6" lg="4" v-for="project in projects" v-bind:key="project.id">
                    <p>
                        {{ project.body }}
                    </p>
                    <b-button variant="primary" v-b-modal="'myModal' + project.id">Go somewhere</b-button>
                    <b-modal :id="'myModal' + project.id" size="lg" title="Large Modal" centered >
                        Hello Modal!
                    </b-modal>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>