Recommended way to passing in params to the modal

[ul8]

Is your feature request related to a problem? Please describe.

I frequently call modals from various places and usually pass in some params that modify what is displayed in the modal content.

vue-js-modal's show() method contains an optional params argument, which can be used for this purpose.

In vue-final-modal, there is no such parameter. What is the recommended solution you use for this? Passing props to a higher order component? I wouldn't like that much as it result in a lot of extra bindings and calls in the component that is using the higher order component.

Describe the solution you'd like

Adding params to the show() function and including those values in the @before-open event is a tried and tested solution, but maybe you have other ideas.

[hunterliu1003]

In vue-final-modal, there is no such parameter. What is the recommended solution you use for this?

In most cases, I store data in vuex and use it directly in modal component.
Modifying vuex state first, and then calling show()method to open modal.

Actually, I never thought about pass params from show() method.

Adding params to the show() function and including those values in the @before-open event is a tried and tested solution, but maybe you have other ideas.

This is possible to add params to the show() function and including in @before-open event.
But do you also expect to use these values directly in the modal component's template through scoped-slot like:

<vue-final-modal v-model="showModal" name="MyModal" ...>
    <template v-slot:default="{ params }">
        // using some params here
    </template>
</vue-final-modal>

[ul8]

Yes, that's how it is done with vue-js-modal (scoped slots and also passing params in show method).

True I guess vuex is the easiest way to do this without that mechanism. I'm not a fan of it, but it'll work. Will have to figure out something for stacked modals with different params though. Thanks for your advice!

[hunterliu1003]

Hi @ul8,

This enhancement is published at:

• 0.20.1 for Vue 2
• 1.7.1 for Vue 3