Vue.js open modal by click of a button Vue.js open modal by click of a button vue.js vue.js

Vue.js open modal by click of a button


According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:

<div id="app">  <div class="container">    <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>    <example-modal></example-modal>  </div></div>

Edit

I misread the question so i edit my answer.

It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)

<div id="app">  <div class="container">    <button class="btn btn-info" @click="showModal">show modal</button>    <example-modal ref="modal"></example-modal>  </div></div>
methods: {  showModal() {    let element = this.$refs.modal.$el    $(element).modal('show')  }}

Fiddle example


Without jQuery you could create a function on "method:" block like this:

openEditModal(data){  // <handle with your data>  this.$root.$emit("bv::show::modal", "your-modal-id");}