[Vuejs]-Vue.js how to add index to modal window

by

1👍

A quick fix for the above would be:

  1. Change is isModalVisible:false to something like selectedId:''
  2. Pass the staff.id to showModal(id) method – this is missing from your code.
  3. Set selectedId = id
    showModal() {
        this.selectedId = id;
    }
  1. Change v-show="isModalVisible" to v-show="selectedId == staff.id"
👤Spiderman

0👍

I see that you are using boostrap-vue.

boostrap-vue already has a solution for using modals see here.

This way you can open specific modal by their id’s.

let app = new Vue({
  el: "#app",
  data: {
    staffs: [
      { id: 1, name : "Bob" },
      { id: 2, name : "Ron" },
      { id: 3, name : "John" },
      { id: 4, name : "Greg" }
      ]
  }
});
<!-- Load Vue followed by BootstrapVue -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <div v-for="staff in staffs" :key="staff.id">
    {{staff.name}}
    <b-btn @click="$bvModal.show(staff.id)" variant="danger">Delete</b-btn>
    <b-modal :id="staff.id" :title="`Delete ${staff.name} ?`">
      Are you sure you want to delete {{staff.name}} ?
    </b-modal>
  </div>
</div>

If you do not want to use this solution @Spiderman has a good answer.

👤Pierre Said

Leave a comment