vue.js - 从脚本标签内的方法关闭 v-edit-dialog

Question

我有带自定义插槽的 v-edit-dialog。我希望 v-edit-dialog 从对话框输入槽内的按钮触发的方法关闭。

目前我必须在对话框外按下才能关闭它 我到处搜索，没有找到任何关于那个特定问题的信息

<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>

Answer 1

我没有看到关闭对话框的显式 API。

解决方法是以编程方式单击表格以模拟外部单击，这将自动关闭对话框:

<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