[Vuejs]-Boostrap modal renders multiple times

by

0👍

The problem here is most likely because your id’s are not unique. For each row of your table you are generating the following;

<b-modal id="edit-student" title="Edit student info">
    <p class="my-4">Hello from modal!</p>
</b-modal>

with the same ID.

I think the best approach here would be to include the Actions in the Table component. You don’t need the extra component since it has no internal logic or props.

Table.vue

data() {
        return {
            fields: [
                'index',
                'full_name',
                { key: "date_of_birth", label: 'Date of Birth' },
                'municipality',
                { key: "action", label: 'Action' }
            ],
            lastClickedRowIndex: -1
        }
    },
    ...

<template>
    <b-table :fields="fields" :items="tableItems" :per-page="perPage" :current-page="currentPage" responsive="sm" primary-key="index"
        striped hover>
        <template #cell(action)="data">
          <b-button variant="primary" class="mx-1 p-1" @click="() => (lastClickedRowIndex = data.index)" v-b-modal.edit-student>
            <b-icon-pencil-fill></b-icon-pencil-fill>
          </b-button>
          <b-button variant="danger" class="mx-1 p-1">
            <b-icon-trash-fill></b-icon-trash-fill>
          </b-button>
        </template>
    </b-table>
    <b-modal id="edit-student" title="Edit student info">
        <p class="my-4">Hello from modal!</p>
        <!-- Dynamically change contents here based on lastClickedRowIndex -->
    </b-modal>
</template>

I apologise if any syntax is incorrect I’ve only used Vue 3.

Leave a comment