[Question] How can I access "params" from within mounted or in a method?

[rowild]

If I pass params to the modal, is there a way to access those in a method or in any of the life cycles? I log out "this" in the modal's "mounted()" and dig through that huge object, but I cannot find anything about those params.

THX

Version

vue-final-modal: v2.4.1 vue: v2.6.12 nuxt: v2.15.8

OS

Mac Catalina

[hunterliu1003]

@rowild

You can access params in the beforeOpen event

<vue-final-modal @beforeOpen="event => event.ref.params">
  <!-- modal content -->
</vue-final-modal>

or in scoped-slot

<template v-slot="{ params }">
  <!-- modal content -->
</template>

https://vue-final-modal.org/guide/params#on-beforeopen-event

[rowild]

@hunterliu1003 I know that, thank you. But my question is how can I access those params in methods or mounted()?

[hunterliu1003]

@rowild

I wrote a Vue 2 example for you. https://codesandbox.io/s/vuefinalmodal-params-muek9

BTW, I don't like using params actually. I think params is not necessary in vue-final-modal also. There are many ways can replace params, so params might be remove from version 3.5.x (for Vue 3).

[rowild]

@hunterliu1003 Wow, thank you so much! Coffee is on its way! :-)

Just out of interest: If params will become obsolete, which ways do you have in mind to get data into a modal?

[hunterliu1003]

@rowild

Thanks!

For myself, I will write a component and pass props to the component through slots key. I think this is better practice.

It will be like

import ComponentWithProps from './ComponentWithProps.vue'

this.$vfm.show({
  component: 'VueFinalModal',
  slots: {
    default: {
      component: ComponentWithProps,
      bind: {
        ... // pass props to ComponentWithProps
      },
      on: {
        ... // listen events from ComponentWithProps
      }
    }
  }
})

This way is much more readable and straightforward for Vue developer than params in my opinion.

[rowild]

@hunterliu1003 I need to bother you again with this example. There is something weird going on. If you look at the clone of your example:

https://codesandbox.io/s/vuefinalmodal-params-forked-34ysx?file=/src/App.vue

you will find console.logs in the @before-open method. Except for the first one, these will not work. However, accessing $children works reliably:

this.$children[0].params

I just realized, though, that this example uses the script tag in the parent template, but not in the modal itself. So what I need is to a dynamic modal, and within that dynamic modal I need to access the params within the script tag. How can this be done?

Could you please have a look at the forked example and let us know how to fix the problem? Thank you!

[victor-ponamariov]

+1