Vue-material Dialog : Close Dialog

Question

I'm using vue-material Dialog to show a form, I've do that :

LeftSidenav.vue - template :

<md-button class="list-button" id="formBtn" @click="openFormDialog()">
      <md-icon>description</md-icon>
      <span class="sidenav-item-text">{{$t('form_dialog')}}</span>
      <md-tooltip md-delay="100" md-direction="right">{{$t('form_dialog'')}}</md-tooltip>
    </md-button>
    <md-dialog md-open-from="#formBtn" ref="formDialog">
      <md-dialog-title>Title</md-dialog-title>

      <md-dialog-content>
        <form-dialog></form-dialog>
      </md-dialog-content>
</md-dialog>

LeftSidenav.vue - script :

methods: {
  openFormDialog() {
    this.$refs.formDialog.open();
  },
  closeFormDialog() {
    this.$refs.formDialog.close();
  },
},

FormDialog.vue :

<template>
  <div>
    Test
    <div class="buttons">
      <md-button class="md-raised" @click="closeFormDialog">Cancel</md-button>
      <md-button class="md-raised">Submit</md-button>
    </div>
  </div>
</template>

The problem is in my FormDialog I don't know how to access closeFormDialog method, how can I close my Dialog by clicking the cancel button on my FormDialog.vue ?

HI Siddharth ! No I don't find a solution I still have this issue :/ — Adrien Moiraud
Hahaha ! I like vue but I still can't do my close action, in vuejs forum someone tell me to use $emit but that's don't work :/ — Adrien Moiraud

developerkhashab developerkhashab · Accepted Answer · 2020-06-08T07:15:00

<el-dialog
  :visible="dialogVisible"
  title="Contact Form View"
  ref="changeUserId"
  :before-close="() => dialogVisible = false"
>
  <contact-form />
</el-dialog>

check if it had same as element ui function before-close

Vue-material Dialog : Close Dialog

1 Answers