vue-final-modal icon indicating copy to clipboard operation
vue-final-modal copied to clipboard

[Question] How can I access / change a modal property from within the modal?

Open rowild opened this issue 2 years ago • 1 comments

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 avatar Nov 22 '21 09:11 rowild

@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
  }
})

hunterliu1003 avatar Nov 29 '21 12:11 hunterliu1003