Laravel + Vue.js: Bootstrap modal not showing when called using vue js model

Question

I have this template

<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>

I'm using this template for the project https://www.themeineed.com/downloads/klorofil-free-bootstrap-admin-template/, I kept everything as default and didn't have any major modifications with the bootstrap classes. If I use jquery function to call the modal it will show correctly, however moving the modal to another template and calling is by using v-model and v-if, nothing really happens. Please see sample below

parent template

<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>

this is the modal:

<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>

Is there anything I'm doing wrong?

John Shipp · Accepted Answer · 2020-05-24 13:54:09Z

2

When you set infsModal to true, all that's happening is that you're including the modal code but you're still not displaying the modal. You can still use jQuery here if you'd like, no reason not to. You can remove the infsModal variable since it's not needed (the modal won't display even if that's set to true... you still need to tell Bootstrap to actually show the modal). If you want to get away from jQuery, a solid option is Bootstrap-Vue https://bootstrap-vue.org/docs/components/modal ... let me know if that helps!

answered May 24, 2020 at 13:54

John Shipp

1,15311 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Drew Over a year ago

would that cause any issues with the current template that I used ?

John Shipp Over a year ago

@Drew it shouldn't. It seems pretty straight forward. No need to over complicate it! :)

Collectives™ on Stack Overflow

Laravel + Vue.js: Bootstrap modal not showing when called using vue js model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related