Vue close modal from a button

0
votes

I am using bootstrap-vue as for the modal. When I click on button OPEN MODAL it opens the modal which contains footer button as OK and CANCEL. These buttons closes the modal, as its pre defined code from bootstrap-vue.

I tried to add button inside the modal called CLOSE MODAL USING THIS BUTTON, which is suppose to close the modal but it does not. Is there a way to make CLOSE MODAL USING THIS BUTTON to close out from modal?

View

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" v-on:click="opensModal">Open Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

Script

new Vue({
  el: "#app",
  data: {
    clickOnButton: true,
    displayModal: true
  },
  methods: {
    opensModal(){
     this.clickOnButton = false; <!-- it opens the modal -->
    },
    closeModal(){
        this.displayModal = false; <!-- it does not close -->
    }
  }
})

Below is the link above code on JSFIDDLE

https://jsfiddle.net/ujjumaki/z1ndL65r/18/

2
twitter-bootstrapvue.jsbootstrap-vue

2 Answers

1
votes

You can use the built-in this.$bvModal.hide(id) provided by bootstrap-vue.

So instead of...

<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>

do this instead...

<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>

This way, you don't need the extra close modal method.

Edit

Actually you don't need the entire method block. You can as well take out the data items.

Your code should work fine with just this...

<div id="app">
  <b-button v-b-modal.modal-scrollable variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

Script...

new Vue({
  el: "#app"
})

Isn't that a lot cleaner? ;D

1
votes

Insted I have used another solution the v-model property for the b-modal for showing and hide the modal.

<div id="app">
  <b-button @click="openModal()" variant="info" >Open this Modal</b-button>

  <b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-modal="popUp">
    <p class="my-4">
      "Contains modal detail"
    </p>

      <b-button variant="info" @click="closeModal()">CLOSE USING THIS BUTTON</b-button>
      <br>

    </b-modal>
</div>

...And inside script create methods

openModal(){
  this.popUp = true;
}

closeModal(){
  this.popUp = false;
}