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>

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

现在，我需要使用传入的值来过滤下拉列表。 Mounted 事件仅运行一次，因此我内部的逻辑仅在单击的第一行时触发。

这是我的

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

组件本身），请参阅官方docs

Answer 2

如果您想在对话框组件打开时在其内部执行某些操作，可以采取一些解决方法。

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

如您所见，您可以将对话框的处理程序变量作为对话框的参数传递。在这种情况下是“dialogOpen”。

然后在 editCompany 组件中，

watch: {
    'dialogOpen' :{
      handler(newVal, oldVal) {
       //do your stuff.
      },
      deep: true
    },
}

所以简而言之，它会监视控制对话框的变量，根据其值（主要是 true 或 false），您可以执行操作。

Answer 3

在我使用 Vuejs 3 的设置中，安装的处理程序函数似乎可以工作：

mounted: async function () {
  console.log('dialog opened!');
  //...load data with fetch... await this.loadItem(); 
}