Vuetify：关闭对话框时如何执行方法？

Question

我想做这样的事情：

<v-dialog @close="close">
...
</v-dialog>

如何在对话框关闭时执行方法？

Answer 1

您正在寻找如何在对话框中实现 event handling。这不是 Vuetify 特有的，由 Vue 框架处理。如文档所示，您需要在组件中提供一个方法并将其名称用作 @close 事件处理程序属性的值。所以，像这样：

..
methods: {
    close: function (event) {
      // Do closey things
    }
  }

Answer 2

您可以将 v-model 添加到您的对话框中：

<v-dialog v-model="showDialog">
...
</v-dialog>

然后在模型数据上添加手表：

data() {
  return {
    showDialog: false
  }
},
watch: {
  showDialog(newvalue, oldvalue) {
    if (!newvalue && oldvalue)
       // code to be exceuted when dialog model become false
  }
}

否则，如果你想要一个持久化的对话框，你可以在对话框中添加一个卡片动作的方法：

  <v-dialog v-model="show">
    <v-card>
     <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        color="green darken-1"
        text
        @click="methodOnClose"
      >
        Disagree
      </v-btn>
      <v-btn
        color="green darken-1"
        text
        @click="dialog = false"
      >
        Agree
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

而 methodOnClose 是

methods: {
  methodOnClose() {
    // your method when dialog has been closed
  }
}

Vuetify：关闭对话框时如何执行方法？

Vuetify: How to execute a method when a dialog is closed?

vuetify.js