Question

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

这是我的代码：

<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

你应该使用独特的ID，正如Belmin所说。

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

动态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>

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

1 个答案: