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-separator />
              <project-form :customerId="customerId" :selectedItem="selectedItem" :customers="pageContent.customers"></project-form>

  • 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