Laravel + Vue.js：使用 vue js 模型调用时不显示引导模式答案

【问题标题】：Laravel + Vue.js: Bootstrap modal not showing when called using vue js modelLaravel + Vue.js：使用 vue js 模型调用时不显示引导模式
【发布时间】：2020-09-11 03:51:02
【问题描述】：

我有这个模板

<template>
    <div class="main">
        <div class="container-fluid" style="padding-top: 2.5%">
            <h4 class="page-title"><i class="lnr lnr-funnel"> </i> Infusionsoft Accounts
                &nbsp;<button @click="addInfusionsoft" class="btn btn-xs btn-success" ><i class="lnr lnr-plus-circle"> </i> New </button>
            </h4>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-responsive table-bordered table-striped">
                        <tr>
                            <th>ID</th>
                            <th>App Name</th>
                            <th>Auth Key</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th width="300px">Action</th>
                        </tr>
                    </table>
                </div>
            </div>
                <div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form method="POST" action="" id="addInfsAccount"/>
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Infusionsoft Account</h4>
                            </div>
                            <div class="modal-body">
                                <p class="small">Fill up the form to add a new Infusionsoft Account.</p>
                                <br/>
                                <div class="form-group row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Add Account</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            <app-legend/>
        </div>
    </div>
</template>

<script>
    import Legend from "./Legend";
    import NavBar from "../layouts/NavBar";
    import SideBar from "../layouts/SideBar";

    export default {
        data() {
            return {
                infsModal: false,
            }
        },
        created() {

        },
        components: {
            'app-legend': Legend,
            'nav-bar': NavBar,
            'side-bar': SideBar,
        },
        methods: {
            addInfusionsoft() {
                $('#modalAddAccount').modal('show');
            }
        },

    }
</script>

我将这个模板用于项目https://www.themeineed.com/downloads/klorofil-free-bootstrap-admin-template/，我将所有内容都保留为默认值，并且没有对引导类进行任何重大修改。如果我使用 jquery 函数调用模态，它将正确显示，但是将模态移动到另一个模板并使用 v-model 和 v-if 进行调用，实际上没有任何反应。请参阅下面的示例

父模板

<template>
    <div class="main">
        <div class="container-fluid" style="padding-top: 2.5%">
            <h4 class="page-title"><i class="lnr lnr-funnel"> </i> Infusionsoft Accounts
                &nbsp;<button @click="infsModal = true" class="btn btn-xs btn-success" ><i class="lnr lnr-plus-circle"> </i> New </button>
            </h4>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-responsive table-bordered table-striped">
                        <tr>
                            <th>ID</th>
                            <th>App Name</th>
                            <th>Auth Key</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th width="300px">Action</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div v-if="infsModal">
                <div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form method="POST" action="" id="addInfsAccount"/>
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Infusionsoft Account</h4>
                            </div>
                            <div class="modal-body">
                                <p class="small">Fill up the form to add a new Infusionsoft Account.</p>
                                <br/>
                                <div class="form-group row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
                                        <span v-if="false" span class="invalid-feedback">
                                        <strong>Error</strong>
                                    </span>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Add Account</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>

            <app-legend/>
        </div>
    </div>
</template>

<script>
    import Legend from "./Legend";
    import NavBar from "../layouts/NavBar";
    import SideBar from "../layouts/SideBar";
    import InfusionsoftAdd from "../infusionsoft/InfusionsoftAdd";

    export default {
        data() {
            return {
                infsModal: false,
            }
        },
        created() {

        },
        components: {
            'app-legend': Legend,
            'nav-bar': NavBar,
            'side-bar': SideBar,
            'infs-modal': InfusionsoftAdd,
        },
        methods: {
            addInfusionsoft() {
                //this.$router.push('/infusionsoft')
            }
        },

    }
</script>

这是模态：

<template>
    <div v-if="dialog">
        <transition name="modal">
            <div class="modal fade" id="modalAddAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <form method="POST" action="" id="addInfsAccount"/>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Infusionsoft Account</h4>
                        </div>
                        <div class="modal-body">
                            <p class="small">Fill up the form to add a new Infusionsoft Account.</p>
                            <br/>
                            <div class="form-group row">
                                <div class="col-md-8 col-md-offset-2">
                                    <input id="appName" type="text" required placeholder="App Name e.g l328" class="form-control" name="appName">
                                    <span v-if="false" span class="invalid-feedback">
                                                <strong>Error</strong>
                                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add Account</button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dialog: true
            }
        },
        methods: {
            back() {
                //this.$router.back();
            }
        }
    }
</script>

是不是我做错了什么？

【问题讨论】：

标签： php laravel vue.js bootstrap-4

【解决方案1】：

当您将 infsModal 设置为 true 时，所发生的只是您包含了模态代码，但您仍然没有显示模态代码。如果你愿意，你仍然可以在这里使用 jQuery，没有理由不这样做。您可以删除 infsModal 变量，因为它不是必需的（即使设置为 true，模态也不会显示......您仍然需要告诉 Bootstrap 实际显示模态）。如果你想摆脱 jQuery，一个可靠的选择是 Bootstrap-Vue https://bootstrap-vue.org/docs/components/modal ...如果有帮助，请告诉我！

【讨论】：

这会导致我使用的当前模板出现任何问题吗？
@Drew 不应该。这似乎很简单。无需过度复杂化！ :)