Form Component in Qdialog



  • I use a form component in qdialog and in form component I have submit and cancel button… How can I close the dialog from form component. It’s not globally declared.

    <q-dialog v-model="formDialog" persistent ref="projectForm">
          <q-card style="width: 700px; max-width: 80vw;">
            <q-toolbar class="q-pa-md">
              <q-icon name="work" size="md" class="text-primary"/>
              <q-toolbar-title>{{ formTitle }}</q-toolbar-title>
              <q-btn flat round dense icon="close" v-close-popup />
            </q-toolbar>
            <q-separator />
            <q-card-section>
              <project-form :customerId="customerId" :selectedItem="selectedItem" :customers="pageContent.customers"></project-form>
            </q-card-section>
          </q-card>
        </q-dialog>
    


  • You have to trigger an event on you form component

    onSubmit() {
     // validation & stuff
    this.$emit('submit_or_whatever',  { ... });  
    }
    

    And catch it into your dialog

      <project-form :customerId="customerId" :selectedItem="selectedItem" :customers="pageContent.customers" @submit_or_whatever="onSubmitorWhatever" ></project-form>
    

    In your dialog component:

    methods:  {
     onSubmitOrWhatever (playload) {
       this.formDialog = false
     }
    }
    


  • Thank you… I thought more complicated 🙂 that’s right and worked.


Log in to reply