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

Answer 1

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

Answer 2

if you want to do something inside the dialog component when it's open, there is a little workaround that you can do.

 <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>

as you see you can pass dialog's handler variable as dialog's parameter. its 'dialogOpen' in this case.

then inside editCompany component,

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

So in short it will watch the variable which is controlling dialog, based on its value which mostly is true or false, you can do your operation.