How to add event to OK button in `this.$bvModal.msgBoxConfirm(...)`?

Question

I have a bootstrap-vue project. I follow this tutorial:

I can use confirm modal to open a big image modal.

      showBigImg(src, id) {
        const h = this.$createElement

        const BigImgVNode = h(
          'div',
          {class: ['foobar']},
          [
            h('b-img', {
              props: {
                src: src,
                fluid: true,
                center: true
              }
            })
          ]
        )

        this.$bvModal.msgBoxConfirm([BigImgVNode], {
          buttonSize: 'sm',
          centered: true,
          size: 'lg',
          okTitle: 'OK', 

        }).then(value => {

        })

      }
    }

but I have a question, I search official docs many times, I don't get the way to add an event to ok button.

I also tried:

        this.$bvModal.msgBoxConfirm([BigImgVNode], {
          buttonSize: 'sm',
          centered: true,
          size: 'lg',
          okTitle: 'OK', 
          ok: ()=> {
            console.log("ok button clicked.")
          }
        }).then(value => {

        })

but not work, please tell me how to add the event to OK button in this.$bvModal.msgBoxConfirm(...) this way.

Answer 1

Based on the following paragraph from the docs. You can use the return value from the Promise to determine how the modal was closed. Where the returned value will be true if the OK button was pressed.

Both methods return a Promise which resolve into a value when the modal hides. .msgBoxConfirm() resolves to either true (OK button pressed), false (CANCEL button pressed), or null (if the modal was closed via backdrop click, Esc press, or some other means.

https://bootstrap-vue.org/docs/components/modal#modal-message-boxes (Quote found a slightly under the table in linked section)

async showModal() {
  try {
    const result = await this.$bvModal.msgBoxConfirm(
      "Click the `OK` button to see an alert.",
      {
        title: "Confirmation Box"
      }
    );

    if (result === true) 
      alert("OK button was pressed");
    else if (result === false) 
      alert("CANCEL button was pressed");
    else if (result === null)
      alert("The modal was closed by the user using other means. (ESC, Backdrop, ect..)");
  } catch {
    alert("The modal was destroyed before the user could make a decision");
  }
}

Working Example

new Vue({
  el: "#app",
  methods: {
    async showModal() {
      try {
        const result = await this.$bvModal.msgBoxConfirm(
          "This is a confirmation box", {
            title: "Confirmation Box"
          }
        );

        if (result === true)
          alert("OK button was pressed");
        else if (result === false)
          alert("CANCEL button was pressed");
        else if (result === null)
          alert("The modal was closed by the user using other means. (ESC, Backdrop, ect..)");
      } catch {
        alert("The modal was destroyed before the user could make a decision");
      }
    }
  }
});

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-btn @click="showModal">
    Show Modal
  </b-btn>
</div>