Search code examples
javascriptvue.jsvuejs2bootstrap-vue

Open modal when click on button

I have this code :

   <sepa-modal
    ref="sepaModal"
  />
  <b-card
    id="show-btn"
    class="card-modal"
    @click="openSepaModal()"
  >
  </b-card>


  openSepaModal() {
    console.log(this.$refs);
    this.$refs.sepaModal.show();
  },

SepaModal :

<b-modal
class="sepa-modal-edit"
id="sepaModal"
centered
top
no-fade
static
size="lg"
ref="modal"
hide-footer>
...........

I have the error : Error in v-on handler: "TypeError: this.$refs.sepaModal.open is not a function". I tried with this.$refs.sepaModal.show(); (the same error). Very strange because I put a console.log and I have sepaModal in refs.

Solution 
  • this.$refs.sepaModal.$refs.modal.show();