using bootstrap4 modal in vuejs

Question

I am trying to render a modal with a simple change in my data using a vue @click on an element but I'm not able to get the modal to popup. I am hoping someone can point me in the right direction here.

I'm not using vue-bootstrap in this project just bootstrap 4 for reference here.

my click


  <div class="d-flex justify-content-between">
       <span class="d-block">These students cannot be in the same group:</span>
       <button @click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
  </div>

my Modal


<!--MODAL SECTION-->
        <div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    <div class="modal-body">
                         <p>Modal body text goes here.</p>
                    </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
<!--MODAL SECTION-->

my data

data:{
otherData: [],
showModal: false
}

currently it isn't showing at all. I am trying to use an @click to change the showModal prop in data to 'true' but that doesn't seem to be the right way of doing it. — monsterpiece
– monsterpiece, Commented Apr 9, 2020 at 4:51
@Rjosh yes I was able to get it to work eventually by using this after making sure js popper was included properly — monsterpiece
– monsterpiece, Commented Apr 9, 2020 at 5:59

hyperplural · Accepted Answer · 2020-12-24 13:21:32Z

2

You need data-toggle and data-target on the button:

<div class="d-flex justify-content-between">
    <span class="d-block">These students cannot be in the same group:</span>
    <button data-target="#myModal" data-toggle="modal" @click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>

See: https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes

Since the modal is controlled via some bootstrap internals, I do not think you need the v-if and @click handler.

edited Dec 24, 2020 at 13:21

hyperplural

2356 silver badges23 bronze badges

answered Apr 9, 2020 at 3:39

Avocado

9117 silver badges27 bronze badges

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

4 Comments

monsterpiece Over a year ago

I haven't been able to get it to work using either the v-if or the data-target method unfortunately. I have also tried using v-model to no effect. I know bootstrap is included. Does js popper need to be included to use bootstrap modals?

monsterpiece Over a year ago

after including js popper the modal now works for some reason. Thanks for your help!

Avocado Over a year ago

@monsterpiece awesome! What version of bootstrap 4 are you using? Popper was required for modals in the beta versions, but I do not think it is required in the current version (4.4.1). Some CDNs serve older versions.

monsterpiece Over a year ago

I was using 4.4.1 I might be mistaken and I made a fluke change by accident but that seemed to be the fix for me.

Collectives™ on Stack Overflow

using bootstrap4 modal in vuejs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related