Vuetify open dialog with custom logic

Question

I want to open a dialog on a button click. But i need logic to be executed before and after this event. How can this be done?

What i have tried:

template

<v-dialog v-model="dialog" width="400">
  <template v-slot:activator="{ on }">
    <v-btn color="primary" @click="openDialog">Dialog</v-btn>
  </template>
  <v-btn>lol</v-btn>
</v-dialog>

script

data() {
    return { dialog: false };
  },
  methods: {
    openDialog() {
      this.dialog = true;
    }
  }
}

This seems like a bad fix because after all the v-slot on is still there.

Both are valid. Anything outside of that is opinion-based, hence off-topic here. Please read How to Ask. — tao
That's an entirely different question. Make sure you only ask one question at a time, so that any potential answer is helpful for anyone having a similar question. If you ask more than one question, your question(s) and any potential answers tend to be less helpful for future users. — tao
Well, in all fairness, this question is off-topic. I would hide it, edit it to become on-topic and then re-open it. Considering it already has an answer, you could simply post a new one instead. It's up to you. But, chances are, if you don't close it, community will if it remains in current form. You basically can't ask about personal preferences on Stack Overflow. Not even about coding personal preferences. — tao
By default, a button inside activator slot will open the modal on click/tap/focus+enter, etc.... If you bind anything else to that button, it's also going to be run. See this example. If you want to condition the opening of the modal on custom component logic, don't use an activator. Use a custom fn, run your logic and only open the modal programmatically if the custom logic is satisfied. — tao

TKD21 TKD21 · Accepted Answer · 2020-04-12T14:23:18

You don't really need to use v-slot:activator="{on}" in the first example - <v-dialog> tags can be activated without that (as described in the "Without activator" example here).

However, the recommended way for me personally would be the second example you have provided - the one that uses v-on to trigger the dialog, as it handles opening the dialog without writing an extra function to set one of your data variables.

Vuetify open dialog with custom logic

1 Answers