vue-final-modal
vue-final-modal copied to clipboard
[Question] How can I access / change a modal property from within the modal?
In Nuxt, I use the event bus system to listen to a loading change:
// somewhere.vue
export default {
watch(newVal) {
if(newVal === false) {
this.$nuxt.$emit('loadingFinished')
}
}
}
In a vue-final-modal I listen to this event like this:
// VDynamicModal
export default {
data: () => ({
somethingIsLoading: true
}),
mounted() {
this.$nuxt.$on('loadingFinished', () => {
this.somethingIsLoading = false
})
}
}
I can use loadingFinished
to dynamically show the close button.
But is it also possible to set a vue-final-modal's property esc-to-close
and cick-to-close
to true?
I tried changing the props directly:
this.$children[0].$options.props.clickToClose = true
this.$children[0].$options.props.escToClose = true
but to no avail.
Thank you!
Version
vue-final-modal: v2.4.1 vue: v2.6.12 nuxt: v2.15.8
@rowild
I didn't try to change the options after the modal opened. Is that ok if you set clickToClose
and escToClose
to true at the beginning?
maybe like:
this.$vfm.show({
component: VDynamicModal,
bind: {
clickToClose: true,
escToClose: true
}
})