How can I open a modal in VueJS using bootstrap?

Question

I am trying to open a modal in my Vue Template using boostrap. but whenever I try using jquery on it, modal is not appearing.

Here is my code:

<template>
  <div id="app_religion">
    <!-- Button trigger modal -->
    <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button> -->
    <button type="button" class="btn btn-primary"  @click="showModal()">
      Open
    </button>

    <!-- 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">
            test
          </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>

</template>

<script>

export default {
    methods: {
        showModal() {
          console.log("test")
          $('#exampleModal').modal('show');
        },
    },
}
</script>

I am really new in using Vue, can anyone guide me on how to solve my problem. I am really lost on trying to figure it out.

I am not sure. did you run "npm run watch" or "npm run dev" after change on the component? — Emtiaz Zahid
– Emtiaz Zahid, Commented Oct 21, 2021 at 10:01
yes. the modal is appearing if i am not using the jquery function. but whenever i am trying to use the modal('show') in jquery, modal is not appearing but when i inspect element it, the modal class has a show on its class. — Rein Mallari
– Rein Mallari, Commented Oct 21, 2021 at 10:04

XERZES · Accepted Answer · 2021-10-22 16:10:45Z

This can be easily implemented through plain js

Start by assigning a unique id to your modal

<div class="modal fade" id="uniqueId" tabindex="-1" role="dialog" aria-labelledby="uniqueIdlLabel" aria-hidden="true">

import Modal from bootstrap

import { Modal } from "bootstrap";

Declare a variable that will serve as your proxy to your modal, declared as uniqueModal below, Assign the variable the DOM element retrieved by uniqueId, use the inbuilt functions provided by bootstrap to manipulate the modal. Documentation

export default {
    name:"randomName",
     data(){
     return {uniqueModal:null}
    },
    methods:
    {
     showUniqueModal() {
      this.uniqueModal = new Modal(document.getElementById("uniqueId"),{ keyboard: false });
      this.uniqueModal.show();
      },
     closeUniqueModal() {
      this.uniqueModal.hide();
     },
    },

}

tony19 · Accepted Answer · 2022-07-15 04:32:38Z

1

Why trying to do it with jQuery when you can make it with vue ?

use v-if or v-show on your modal (check the difference between the two and take the one who fits better the result you want)

https://v2.vuejs.org/v2/guide/conditional.html

Didn't tested it, i wrote it on the fly, but something like this should work.

<template>
  <div>
    <button type="button" class="btn btn-primary"  @click="showModal">
      Open
    </button>
    <div class="modal" v-if="modalOpen">
      <p>Hello World</p>
    </div>
  </div>
</template>

<script>

export default {
    data() {
      return {
        modalOpen: false
      }
    },
    
    methods: {
      showModal() {
        this.modalOpen = true;
      }
    }
}
</script>

edited Jul 15, 2022 at 4:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 21, 2021 at 12:41

Petoche

363 bronze badges

Collectives™ on Stack Overflow

How can I open a modal in VueJS using bootstrap?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related