vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.77k stars 6.95k forks source link

[Bug Report] The activator slot must be bound #8551

Closed iamareebjamal closed 5 years ago

iamareebjamal commented 5 years ago

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 dialog

Actual Behavior

The activator slot is mandatory in v-dialog

Reproduction Link

https://github.com/open-roboclub/roboclub-vue/pull/367

jacekkarczmarczyk commented 5 years ago

https://codepen.io/jkarczm/pen/bGbpLeg

twrayden commented 3 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>
KaelWD commented 3 years ago

You don't need that, the activator slot and prop are both optional.

twrayden commented 3 years ago

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.

KaelWD commented 3 years ago

Most of the time that is an error, you can just do v-slot:activator="data"

twrayden commented 3 years ago

Thanks, that works!