Close v-edit-dialog from method within script tag

user_5637397 0
Viewed 648

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>
vuetify.js vue.js
2 Answers

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

user_62771510

I tried the click outside method and it doesn't work 100% of the time.

I found a better way to do it by referencing the edit dialog and then changing its internal property isActive to false:

<v-edit-dialog ref="editDialog">
  <template v-slot:input>
    <v-btn @click="closeDialog">Close</v-btn>
  </template>
</v-edit-dialog>
              
<script>
export default {
  methods: {
    closeDialog() {
      this.$refs.editDialog.isActive = false;
    }
  }
}
</script>
user_9650900
Related