Jake2315
10186
7
Vue

How do I hide and show a Bootstrap modal with Vue 2?

Posted 2 years ago by Jake2315

Hey, I'm trying to configure a Bootstrap modal inside my template (component) with VueJS.

Right now it's working via the normal usage of data-target and id.

This is what I got:

Square.vue:

<template>     
    <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">

        <!-- Modal -->
        <div class="modal fade" id="getModal" role="dialog">
            <div class="modal-dialog">
        
                <!-- Modal content-->
                <div class="modal-content size">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit colors and such..</h4>
                    </div>
                    <div class="modal-body text-center square-options">
                        <a href="#">
                            <p>Colors</p>
                        </a>
                        <hr>
                        <a href="#">
                            <p>Icons</p>
                        </a>
                        <hr>
                        <a href="#">
                            <p>URLs</p>
                        </a>
                        <hr>
                        <a href="#">
                            <p>Descriptions</p>
                        </a>
                    </div>
                </div>
          
            </div>
        </div>
            
        <div class="square">
            <div class="pull-right white-link">
                <a href="#" data-toggle="modal" data-target="#getModal">
                    <slot name="barsSlot"></slot>
                </a>
            </div>    
            <br><br>
            <div class="square-icon text-center">
                <a href="#" data-toggle="modal" data-target="#getModal">
                    <slot name="iconSlot"></slot>
                </a>
            </div>
            <div class="URL white-link text-center">
                <slot name="URLSlot"></slot>
            </div>
            <div class="description white text-center">
                <slot name="descriptionSlot"></slot>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default {
    };
</script>

How can I 'Vueify' this Bootstrap modal (show and hide)?

Please sign in or create an account to participate in this conversation.