Search code examples
vue.jsvuejs2vuetify.js

Run method when Vuetify dialog is opened


I have a v-data-table and the user can click on any row and a dialog opens. Inside on my vuetify dialog is a dropdown of data.

I want to filter this data everytime the user clicks on a row and filter out what the user clicked from the dropdown inside the dialog.

Here is my dialog:

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

You can see I'm passing in the values from the table row the user clicked.

Now, I need to use the value being passed in to filter the dropdown. The mounted event only runs once, so my logic inside of it only fires for the first row clicked.

Here is the mounted event inside of my editCompany template:

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

Every other row the user clicks doesn't fire mounted, so I cant use that unless I can unmount the dialog when its closed.

I found how to fire an event when the dialog closes, but I cannot find a vuetify open event.

How do I run a function everytime the dialog opens so I can filter the results or how do I unmount the dialog everytime it closes, so the mounted event can run everytime? Thanks


Solution

  • For future references, I'll expand @mynd comment, which should be the answer:

    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>

    For further information (about constructing the v-dialog component itself), refer to the official docs