How to communicate with modal in bootstrap vue - vue.js

Question

I have a complex modal that I've put in it's own component. It works on a copy of the passed model, to allow the user to cancel the action.
<template>
<b-modal
v-if="itemCopy"
v-model="shown"
#cancel="$emit('input', null)"
#ok="$emit('input', itemCopy)"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
props: {
value: Object
},
data() {
return {
shown: false,
itemCopy: null
};
},
watch: {
value(itemToDisplay) {
this.shown = !!itemToDisplay;
this.initValue();
},
item(it) {
this.initValue();
}
},
methods: {
initValue() {
this.itemCopy = _.cloneDeep(this.value);
}
}
};
</script>
The Idea to communicate with it is to pass an object in the v-model and, if set, the modal will be shown using that data, and when done, the new state will be communicated back over the v-model as well.
That is, if the user cancel/closed the modal, the v-modal variable will be null, otherwise it will be a new Model that will replace the one in v-modal.
<template>
<!-- omitted for brevity -->
<ItemModal v-model="modalItem" />
<template>
<script>
//...
export default {
data() {
return {
itemNumber: null
};
},
computed: {
modalItem:{
get() {
if (this.itemNumber != null) return this.entries[this.itemNumber];
},
set(newItem) {
if (newItem && this.itemNumber) {
//splice, etc.
}
// in any clase reset the selection to close the modal
this.itemNumber = null;
}
},
//...
<script>
The Problem I have is with the events from b-modal. I can use the #ok but there's no #notOk.
For example #cancel won't be thrown if the user click outside of the modal.
How can this be achieved? Is there another more easier way of doing this?

Answer 1

b-modal emits a generic hide event, which receives as its first argument the trigger that closed the modal (i.e. ok, cancel, esc, backdrop, etc):
<template>
<b-modal
v-if="itemCopy"
v-model="shown"
#hide="handleHide"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
// ...
methods: {
// ...
handleHide(bvEvt) {
if (bvEvt.trigger === 'ok') {
// User clicked OK button
this.$emit('input', this.itemCopy)
} else {
// The modal was closed not via the `ok` button
this.$emit('input', null)
}
}
}
};
</script>

Answer 2

<template>
<b-modal
:id="id"
#ok="$emit('ok', item)"
>
<!-- content -->
</b-modal>
</template>
<script>
export default {
props: {
item: Object,
id: String
}
};
</script>
<template>
<!-- omitted for brevity -->
<ItemModal :item="modalItem" :id="modalId" #ok="onModalOk" />
<template>
<script>
//...
export default {
data() {
return {
modalId: "myItemModal"
itemNumber: null
modalItem: null
};
},
methods: {
showItemModal(itemNumber) {
this.itemNumber = itemNumber
this.modalItem = _.cloneDeep(this.entries[itemNumber])
this.$bvModal.show(this.modalId)
},
onModalOk(newItem) {
if (newItem && this.itemNumber) {
//splice, etc.
}
}
}
//...
<script>