Open modal when click on button

Question

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 bacause I put a console.log and I have sepaModal in refs . Can you help me please? Thx in advance

Answer 1

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

Answer 2

You can use a different (cleaner imo) approach. b-modal can be controlled thanks to the v-model directive. So your SepaModal should have a prop that will take a boolean, and pass it as a v-model to b-modal . With this you don't mess with the component's instance and have full control over the data that toggles your modal

<template>
  <sepa-moda :is-opened="isOpened" />
</template>

<script>
export default {
  /* ... */
  data() {
    return {
      isOpened: false
    }
  }
  methods: {
    openSepaModal() {
      this.isOpened = true
    }
  }
}
</script>

The modal:

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