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>

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

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

这是我的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），您可以进行操作。

打开Vuetify对话框时运行方法

2 个答案: