Laravel vue js 模态隐藏当前模态并使用 bootstrap 5 显示新模态

Question

我的 create.vue中的 vue js 有 3 个组件，

create.vue
list-user.vue
modal-role.vue

我调用另外 2 个组件，

<template>
  <div>
    <modal-role></modal-role>
    <list-user></list-user>
  </div>
</template

这两个组件都是模态

modal-role.vue

<template>
    <div>
            <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRole">
            add members
        </button>

        <!-- Modal -->
        <div class="modal fade" id="modalRole" tabindex="-1" aria-labelledby="modalRoleLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalRoleLabel">Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <ul class="list-group">
                            <li @click="selectRole(item)" data-bs-toggle="modal" data-bs-target="#modalUser" data-bs-dismiss="modal" class="list-group-item list-group-item-action" v-for="item in roles" :key="item.id"> {{ item.name }} </li>
                        </ul>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

list-user.vue

<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
            <div class="modal-dialog" v-if="role">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalUserLabel">Choose members as {{ role.name }} </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="dismiss()"></button>
                    </div>

                    <div class="modal-body">
                        <ul class="list-group">
                            <li 
                                class="list-group-item list-group-item-action" 
                                v-for="item in users" :key="item.id"
                            > 
                                {{ item.name + ' ' + item.surname}} 
                            </li>
                        </ul>

                        <div class="row justify-content-center" v-if="!isLast">
                            <button class="btn btn-primary" @click="loadMore()">
                                View more
                            </button>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="dismiss()">Cancel</button>
                        <button type="button" class="btn btn-primary" @click="choose()" data-bs-dismiss="modal">Choose</button>
                    </div>
                </div>
            </div>
        </div>

所以在我的 create 中.vue 当我的 modal-vue 中有按钮来显示带有角色列表的模式时， 在 my modal-role.vue 中，我期望的是当我选择一个角色时，它会关闭 modal-role.vue 上的模式并显示 中的新模式code>list-user.role 但我收到错误：

app.js:14656 Uncaught TypeError: Illegal invocation
    at Object.findOne (app.js:14656:44)
    at Modal._showElement (app.js:16567:38)
    at app.js:16490:35
    at execute (app.js:13914:5)
    at app.js:16196:7
    at execute (app.js:13914:5)
    at HTMLDivElement.handler (app.js:13937:5)

如果尝试将模式放在 list-user.vue 到 modal-role.vue ，它可以工作，但是如果第二个模式关闭但我仍然有这两个模态之一的叠加背景

编辑

当我显示第一个模态时，我的元素中有两个模态背景。

Answer 1

我在这里遇到了问题，我在 list-user.vue 的模态对话框 div 中放置了一个 v-if ，所以我的模态没有安装的 div 对话框，然后模态引导程序无法调用它来显示，所以我移动了我的if 语句在我的模态内容中并且效果很好