Bootstrap 模态渲染多次答案

【问题标题】：Boostrap modal renders multiple timesBootstrap 模态渲染多次
【发布时间】：2023-01-24 03:48:47
【问题描述】：

在我的表组件中，我使用 Vue Bootstrap 的 b-table 组件创建一个表，该表通过 Vuex 从外部 JSON 文件中检索其数据。现在我还有另一个组件 Actions，它呈现在表格的每一行上。该组件包含一个编辑按钮，单击该按钮应该会打开一个模式。

问题是每当我点击编辑按钮时，4 个模式会一个接一个地出现。问题似乎出在渲染的行数上，因为在 JSON 文件中，有 4 个对象，每个对象都包含学生的姓名、出生日期等。当我摆脱其中三个对象时，模态只呈现一次。我的结论是模态渲染每行 4 次，但我不知道如何解决这个问题。

这是表和操作组件：

<script>
import Actions from "./Actions.vue"

export default {
    data() {
        return {
            fields: [
                'index',
                'full_name',
                { key: "date_of_birth", label: 'Date of Birth' },
                'municipality',
                { key: "action", label: 'Action' }
            ],
            // tableItems: this.$store.state.registeredStudents.registeredStudents
        }
    },

    components: {
        Actions
    },

    methods: {
        generateIndex() {
            return Math.floor(1000000 * Math.random()).toString().slice(0, 6);
        }
    },

    computed: {
        rows() {
            return this.tableItems.length
        },

        tableItems() {
            const registeredStudents = this.$store.state.registeredStudents.registeredStudents

            return registeredStudents.map(student => ({
                index: this.generateIndex(), ...student
            }))
        }
    },

    
}
</script>

<template>
    <b-table :fields="fields" :items="tableItems" :per-page="perPage" :current-page="currentPage" responsive="sm" primary-key="index"
        striped hover>
        <template #cell(action)="data">
            <Actions/>
        </template>
    </b-table>
</template>

<script>
import { BIconPencilFill, BIconTrashFill } from 'bootstrap-vue';

export default {

}
</script>

<template>
    <div>
        <b-button variant="primary" class="mx-1 p-1" v-b-modal.edit-student>
            <b-icon-pencil-fill></b-icon-pencil-fill>
        </b-button>
        <b-modal id="edit-student" title="Edit student info">
            <p class="my-4">Hello from modal!</p>
        </b-modal>
        <b-button variant="danger" class="mx-1 p-1">
            <b-icon-trash-fill></b-icon-trash-fill>
        </b-button>
    </div>
</template>

【问题讨论】：

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

这里的问题很可能是因为您的 ID 不是唯一的。对于表格的每一行，您将生成以下内容；

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

使用相同的 ID。

我认为这里最好的方法是将模态提取到 Table 组件并根据所选内容更改值。

动作.vue；

<script>
import { BIconPencilFill, BIconTrashFill } from 'bootstrap-vue';

export default {
    props: {
        rowNumber: Number
    }
}
</script>

<template>
    <div>
        <b-button variant="primary" class="mx-1 p-1" @click="Set clicked row number here" 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>
    </div>
</template>

表格.vue

<template>
    <b-table :fields="fields" :items="tableItems" :per-page="perPage" :current-page="currentPage" responsive="sm" primary-key="index"
        striped hover>
        <template #cell(action)="data">
            <Actions :rowNumber="Generated serial number goes here"/>
        </template>
    </b-table>
    <b-modal id="edit-student" title="Edit student info">
        <p class="my-4">Hello from modal!</p>
        <!-- Dynamically change contents here -->
    </b-modal>
</template>

如果有任何语法不正确，我深表歉意我只使用了 Vue 3。GTG eat 会在之后尝试帮助你

【讨论】：