Closed iamareebjamal closed 5 years ago
I faced this same issue when trying to create a dialog with no activator (or menu etc.). I didn't want to open my dialog with the provided activator triggers and/or I wanted to prevent the dialog from opening based on conditions.
Here is a workaround I am currently using:
<template>
<v-dialog v-model="isActive" :activator="activatorNode">
<div>
I don't need an activator!
</div>
</v-dialog>
</template>
<script lang="ts">
export default {
data: () => {
return {
isActive: false,
activatorNode: document.createElement("div"),
}
},
}
</script>
You don't need that, the activator slot and prop are both optional.
You're right, my bad I got mixed up. I do however have this issue with menus, here is an example:
https://codepen.io/tomrayden/pen/eYWVwKJ
I want the menu to be positioned where the activator is, however I want to open the menu programmatically instead of using the provided listeners.
Most of the time that is an error, you can just do v-slot:activator="data"
Thanks, that works!
Environment
Vuetify Version: 2.0.7 Last working version: 1.5.17 Vue Version: 2.6.8 Browsers: Chrome 75.0.3770.100 OS: Linux x86_64
Steps to reproduce
Try to create a v-dialog without activator slot
Expected Behavior
The activator slot was previously optional. This allowed us to create v-dialog that was completely decoupled from the triggering element. For example, a delete or edit dialog which is not bound to a single element, but globally triggered by a
v-model
pointing to the item being deleted.The v-model
itemToBeDeleted
can be set by any individual item component having its own delete button, which doesn't have access to the v-dialog element, because it is a single global component not bound to a single dialogActual Behavior
The activator slot is mandatory in v-dialog
Reproduction Link
https://github.com/open-roboclub/roboclub-vue/pull/367