Vue & Quasar - Sharing a custom dialog component

Question

I've looked at Reuse Quasar Dialog plugin with custom component on another component that does not have any answers and I have close to the same question but I have structured code a bit different. On my parent form I have

        <q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
        <profile-dialog></profile-dialog>
        </q-dialog>

and my profile-dialog is a form that is a simple template

         <template> 
            <q-stepper

It seems that if I wrap the component on the parent page the dialog will open BUT I cannot pass in

      prevent-close

or add a

       @hide

I need to know when the dialog form is closed to save changes or prevent closing unless a button is clicked. Even adding the prevent-close in the parent does not work

   <q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
   <profile-dialog></profile-dialog>
   </q-dialog>

If I create the form inside a q-dialog, so it becomes a dialog inside a dialog and set the v-modal to true when it closes the parent form still has the slight gray overlay until the page is clicked and the form will not open a second time

Patel Pratik Patel Pratik · Accepted Answer · 2020-01-08T10:44:43

You can use the emit event in profile dialog for pass event so that you know that form is submitted or not and use persistent so that User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it.

   <q-btn v-if="step == 4" @click="FinishClick" color="primary" label="Finish"/>



    methods: {
        FinishClick() {
            alert("Finish Click From Profile Dialog");
            this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
        }
    }

  <profile-dialog @profile_dialog_emmit="my_fun($event)"></profile-dialog>

In Parent Component.

methods:{
    my_fun(data){
        console.log("Assad");
        alert("From Index Check Console for Data");
        console.log(data)
        this.showProfileForm=false;
    }
  }

Demo - https://codesandbox.io/s/clever-kilby-qf1gz

Go to the final step and click on finish will trigger the event and you can see an alert from the parent component and check the console for data displayed from the parent component.

Vue & Quasar - Sharing a custom dialog component

1 Answers