I'm trying to bind a vue bootstrap modal to its button after displaying multiple ones with v-for:

here is my code:

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

With this this setup when I click on a single button all modals are open so my issue is how to bind "v-b-modal.myModal" to the id="myModal" dynamically with the data id for example.

The data is a simple json format.

Thank you all.

I'm trying to bind a vue bootstrap modal to its button after displaying multiple ones with v-for:

here is my code:

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

With this this setup when I click on a single button all modals are open so my issue is how to bind "v-b-modal.myModal" to the id="myModal" dynamically with the data id for example.

The data is a simple json format.

Thank you all.

• javascript
• data-binding
• ecmascript-6
• vue.js
• bootstrap-modal

• You could use index from each iteration to create unique ID.In fact, ID should be always be a unique value. – Belmin Bedak Commented Nov 14, 2017 at 10:27
• Yeah sure and thank you! but How to display dynamic attribute v-b-modal.id for each button? I have no idea about the syntax – BeeLee Commented Nov 14, 2017 at 10:42

1 Answer 1

You should use unique ids, as Belmin said.

Dynamic v-b-modal value <b-button v-b-modal="'myModal' + project.id">

Dynamic 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>