vue.js - Close v-edit-dialog from method within script tag

Question

I have v-edit-dialog with custom slot. I want the v-edit-dialog to close from a method which is triggered by a button inside the input slot of the dialog.

At the moment I have to press outside the dialog for closing it I searched all over, Did not found anything regarding that specific problem

<v-edit-dialog
              @click.native.stop
            >
              {{ channel.Options}}
              <template v-slot:input>
                <v-select
                  ref="option-select"
                  :data-key="index"
                  :items="index == 0 ? options: [...options, 'Disable Channel']"
                >
                </v-select>
                <v-col class="text-right pa-0 ma-0 mb-2">
                  <v-btn color="primary" outlined @click="handleOptionChange(index)"
                    >Apply</v-btn
                  >
                </v-col>
              </template>
</v-edit-dialog>

<script>
   export default {
        ...
        methods: {
            handleOptionChange(index){
                ...
                //Close v-edit-dialog
            }
        }
   }
</script>

question from:https://stackoverflow.com/questions/65919582/close-v-edit-dialog-from-method-within-script-tag

Answer 1

I don't see an explicit API to close the dialog.

A workaround is to programmatically click the table to simulate an outside-click, which would automatically close the dialog:

<template>
  <v-data-table ref="myTable">
    <template v-slot:input>
      <v-btn @click="closeDialog">Close</v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  methods: {
    closeDialog() {
      // simulate outside-click to close edit-dialog
      this.$refs.myTable.$el.click()
    },
  }
}
</script>

demo