How to open open a dialog component from another component with a button click without routing

[Praveen Patare]

I am using Quasar Framework to create an application. My application requires a dialog window containing some form fields to open when i press a button on another component without changing the uri. Any suggestions ??

[lucasfernog]

Hello @Praveen-Patare

Please take a look here: https://quasar.dev/quasar-plugins/dialog#Invoking-custom-component

Let me know if you have any issues. You can contact us on Discord too, and we can answer you faster If we can help you.

Thank you!

[Praveen Patare]

@lucasfernog I tried using the code used in the document but its giving me an error ‘this.$q.dialog is not a function"’

[Praveen Patare]

I am using the QDialog component and not the QDialog plugin

[metalsadman]

@Praveen-Patare https://quasar.dev/vue-components/dialog#Introduction, i’ve made a sample https://0ybb3.sse.codesandbox.io/#/dialog-sample, source https://codesandbox.io/s/0ybb3.

[lucasfernog]

@Praveen-Patare If you want to use this.$q.dialog, you need to install the Dialog plugin. It is really a nice helper to use your dialogs

[Praveen Patare]

@metalsadman Worked like a charm… thank you !!!

[philipp]

@metalsadman Hi, I just wanted to check out your sample, but it seems to be broken unfortunately… I have the exact same problem, read the documentation, but did not make it work so far. Is it possible to re-upload your sample? Thank you very much! Philipp

[metalsadman]

@philipp yeah, i dunno what’s up with codesandbox but it does give 502 intermittently which is a bugger, will try to do it in a codepen sometime.

Can you try forking the source, see if it works…

[philipp]

Hi @metalsadman, thank you for your answer! I finally made it work by patiently analyzing your code. The dialog appears after clicking a button in a parent component. I already tried to fork the source, but got the same error 500 unfortunately…