Opening a modal from each row in table of Bootstrap-Vue - vue.js

Question

I'm using Vue2 and Bootstrap-Vue. I have a table with data (I use b-table). I want to have "edit" option on each row in order to edit the table. This option (which is an icon of gear) will open a modal and display a view boxes. In my view I have:
<template>
<div>
<b-table class="text-center" striped hover
:items="items"
:bordered=tableBordered
:fields=tableFields
:label-sort-asc=tableLabelSortAsc>
<template #cell(view)="data">
<a target="_blank" rel="noopener" class="no-link" :href="data.item.url">
<b-icon icon="eye-fill"/>
</a>
</template>
<template #cell(edit)="data">
<b-icon icon="gear-fill"/>
<edit-info-modal :data="data"/>
</template>
</b-table>
</div>
</template>
<script>
import EditInfoModal from './EditInfoModal.vue';
import { BIcon } from 'bootstrap-vue';
export default {
components: {
'b-icon': BIcon,
'edit-info-modal': EditInfoModal
},
data() {
return {
tableBordered: true,
tableLabelSortAsc: "",
tableFields: [
{ sortable: false, key: 'edit', label: 'edit' },
{ sortable: true, key: 'comments', label: 'comments' },
{ sortable: false, key: 'view', label: 'view' }
],
items: [
{
"comments": "test",
"url": "some_url"
}
]
}
}
}
</script>
<style scoped>
div {
margin: auto 0;
width: 100%;
}
a.no-link {
color: black;
text-decoration: none;
}
a:hover.no-link {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
It creates a table with three columns - the view column (with eye icon) which redirects to the url, the comments column and the edit column (with gear icon) which should open the modal.
Now, I'm trying to have the modal in a separated Vue file called EditInfoModal:
<template>
<div>
<b-modal id="modal-1" title="BootstrapVue">
<p class="my-4">Hello from modal!</p>
</b-modal>
</div>
</template>
<script>
import { BModal } from 'bootstrap-vue';
export default {
props: {
data: Object
},
components: {
'b-modal': BModal
}
}
</script>
<style scoped>
div {
margin: auto 0;
width: 100%;
}
</style>
First of all, it does not open the modal. Reading over the internet I noticed that I should add isModalOpen field and update it each time and then create the watch method. But here I have a modal for each row. What is the recommended way to keep track of the opened modal (only one is opened at any given time)?

Answer 1

Step 1: install BootstrapVue package and references in main.js
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Step 2: App.vue component
<template>
<div id="app">
<b-table
class="text-center"
striped
hover
:items="items"
:bordered="tableBordered"
:fields="tableFields"
:label-sort-asc="tableLabelSortAsc">
<template #cell(view)="data">
<a target="_blank" rel="noopener" class="no-link" :href="data.item.url">
<b-icon icon="eye-fill" />
</a>
</template>
<template #cell(edit)="data">
<b-icon icon="gear-fill" #click.prevent="editTable(data)" />
</template>
</b-table>
<edit-info-modal :data="data" :showModal="showModal" />
</div>
</template>
<script>
import { BIcon, BTable } from "bootstrap-vue";
import EditInfoModal from "./components/EditInfoModal.vue";
export default {
name: "App",
components: {
"b-table": BTable,
"b-icon": BIcon,
"edit-info-modal": EditInfoModal,
},
data() {
return {
tableBordered: true,
tableLabelSortAsc: "",
tableFields: [
{ sortable: false, key: "edit", label: "edit" },
{ sortable: true, key: "comments", label: "comments" },
{ sortable: false, key: "view", label: "view" },
],
items: [
{
comments: "Vue CRUD Bootstrap app",
url: "https://jebasuthan.github.io/vue_crud_bootstrap/",
},
{
comments: "Google",
url: "https://www.google.com/",
},
],
data: "",
showModal: false,
};
},
methods: {
editTable(data) {
this.data = Object.assign({}, data.item);;
this.showModal = true;
// this.$root.$emit("edit-table", Object.assign({}, data));
// this.$bvModal.show("modal-1");
},
},
};
</script>
<style scoped>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
div {
margin: auto 0;
width: 100%;
}
a.no-link {
color: black;
text-decoration: none;
}
a:hover.no-link {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
Step 3: Child component EditInfoModal.vue
<template>
<div>
<b-modal v-model="showModal" id="modal-1" title="Edit Table">
<p class="my-4">Hello from modal!</p>
<p>Comments: {{ data.comments }}</p>
<p>
URL: <a :href="data.url">{{ data.url }}</a>
</p>
</b-modal>
</div>
</template>
<script>
import { BModal } from "bootstrap-vue";
export default {
// data() {
// return {
// data: "",
// showModal: "",
// };
// },
props: ["data", "showModal"],
components: {
"b-modal": BModal,
},
// mounted() {
// this.$root.$on("edit-table", (data) => {
// this.data = data.item;
// });
// },
};
</script>
<style scoped>
div {
margin: auto 0;
width: 100%;
}
</style>
DEMO Link