CODEWITHSUNDEEP
javascriptvue.jsmodal-dialog
Geoff_S
Geoff_S

Reputation: 5107

Getting modal to show within called vue method

Not sure whats going on here but when I click the button calling a function it won't show my modal.

The function call itself works because the commented out alert will show if I uncomment it. How do I need to be showing the modal within this method?

No errors in the console either

<button @click="eventClick"></button>
<div id="example-modal">
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">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">
                      hihi
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>


eventClick: function(e) {
  var eventObj = e.event;

  //alert('Clicked ' + eventObj.title);
  let element = this.$refs.modal.$el;
  $(element).modal('show');

Upvotes: 0

Views: 33

Answers (1)

David Weldon
David Weldon

Reputation: 64312

It's hard to tell based on the code presented. The modal ref isn't defined.

In general, you really don't want to mix JQuery into Vue - especially when JQuery is modifying the state of a component (in this case the visual state: shown/not shown).

The preferred way to render a modal is with a standard v-if, as shown in this example.

Upvotes: 1

Related Questions