CODEWITHSUNDEEP
javascriptvue.jsvuejs2bootstrap-vue
GPiter
GPiter

Reputation: 809

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.

Upvotes: 0

Views: 262

Answers (2)

Julian
Julian

Reputation: 210

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>

Upvotes: 1

Wakeel
Wakeel

Reputation: 5020

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

Upvotes: 1

Related Questions