DEV Community

loading...

Discussion on: Handling Dialogs with Vue Router

Collapse
jdhrnndz profile image
JD

This approach is clean, however it doesn't look like it supports providing a custom action for the dialog, especially if the function resides in the sibling component of the dialog.

Collapse
berniwittmann profile image
Bernhard Wittmann Author

I‘m sorry, but I seem to not understand what you mean by custom action and by the function you mentioned. Maybe you could explain a little more about what you would like to achieve/mean?

Collapse
jdhrnndz profile image
JD

What I meant by custom action is when you implement a confirm or cancel action to the dialog aside from closing it. I can't figure out yet how to provide a function from MyPageView to MyDialogComponent without using vuex.

Thread Thread
berniwittmann profile image
Bernhard Wittmann Author

Ah I see. The whole idea of this approach is not to create a single MyDialogComponent that can be used in several locations, but to create several dialogs for different purposes. This ties the dialogs closer to the business logic if you will.

However you can control sone behavior via url parameters or some query string in the url.

Let’s use an example:
The goal is to create a dialog that pops up for confirmation after editing a form. This form can either trigger a create or an update request.
Therefore the dialog should display some text and a button Text depending on the action type. The confirm button will then either trigger a create or an update request.

The approach outlined in the article would propose two separate dialogs living in their own vue router routes eg /confirm/edit and /confirm/create (You can still avoid code duplication by using components)

You could still use one dialog, that would render content or do stuff conditionally depending on the url, but that would probably violate the single purpose idea

Let me know whether this could clarify things. If not I can also put together a code snippet. Just let me know

Thread Thread
jdhrnndz profile image
JD

This made much more sense in relation to the business logic.

I'm actually using this approach for a reusable notification/error dialog, which, upon reading your reply, seems like not the best use case for this pattern. I may not use it right now, but I will definitely adapt this where it's appropriate. Thank you for taking the time to respond

Thread Thread
berniwittmann profile image
Bernhard Wittmann Author

Yes, in that case some more reusable dialog would probably by the way to go :)
Of course, such discussions are the key for this dev community and I'm glad to help