Run method when Vuetify dialog is opened

Question

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

You could setup a watcher for the edit/showEdit prop of your component and when it changes to true you could invoke your this.filterOutResults() — mynd
@mynd - thats really my question, i do not know the syntax. I come from the bootstrap html world and Vue is still new to me. — BoundForGlory
The documentation should get you started with watchers in no time. (vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property) The basic idea of a watcher is that you can observe state changes of a given reactive component attribute (prop/data) and react to it accordingly. In your case you could watch the showEdit prop of your edit component and trigger the function that you are already calling in mounted hook. — mynd

Tzahi Leh Tzahi Leh · Accepted Answer · 2020-09-09T16:58:56

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

Run method when Vuetify dialog is opened

2 Answers