打开 Vuetify 对话框时的运行方法

Question

我有一个v-data-table，用户可以单击任何行并打开一个对话框。在我的 vuetify 对话框里面是一个数据下拉列表。

我想在用户每次单击一行时过滤此数据，并从对话框内的下拉列表中过滤掉用户单击的内容。

这是我的对话：

       <v-dialog v-model="edit" max-width="1200"  @input="closeDialog()">
            <editCompany :isEdit="true"
                         v-if="showEdit"
                         :company="selected"
                         :adminEdit="true"></editCompany>
          </v-dialog>

您可以看到我正在传递用户单击的表行中的值。

现在，我需要使用传入的值来过滤下拉列表。挂载的事件只运行一次，所以我里面的逻辑只在点击的第一行时触发。

这是我的editCompany模板内的挂载事件：

     mounted: async function () {
        this.filterOutResults(); //this is where i do my filtering and it works
       },

用户点击的每一行都不会触发安装，所以我不能使用它，除非我可以在关闭时卸载对话框。

我找到了如何在对话框关闭时触发事件，但找不到 vuetify 打开事件。

我如何在每次打开对话框时运行一个函数，以便我可以过滤结果，或者如何在每次关闭时卸载对话框，以便每次都可以运行安装的事件？谢谢

Answer 1

为了将来参考，我将扩展@mynd 评论，这应该是答案：

export default {
  data() {
    return {
      dialogVisible: false,
    },
  },
  watch: {
    dialogVisible(visible) {
      if (visible) {
        // Here you would put something to happen when dialog opens up
        console.log("Dialog was opened!")
      } else {
        console.log("Dialog was closed!")
      }
    }
  },

<v-dialog v-model="dialogVisible" max-width="1200" @input="closeDialog()">
  <!-- Add code here, according to Vuetify docs -->
</v-dialog>

有关更多信息（关于构建v-dialog组件本身），请参阅官方文档