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 because I put a console.log and I have sepaModal in refs.

Wakeel · Accepted Answer · 2021-06-04 15:34:52Z

1

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

answered Jun 4, 2021 at 15:34

Wakeel

5,2602 gold badges16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julian · Accepted Answer · 2021-06-04 16:03:49Z

1

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>

answered Jun 4, 2021 at 16:03

Julian

2182 silver badges4 bronze badges

Collectives™ on Stack Overflow

Open modal when click on button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related