How can I open a modal in VueJS using bootstrap?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

This can be easily implemented through plain js

Start by assigning a unique id to your modal

<div 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();
     },
    },

}