How do I get my ref-activated dialog to appear?

I am using Vue 3 and Vuetify 3. I am trying to understand the various ways to make a dialog appear, based on the examples in the Vuetify documentation, especially the four methods illustrated in the first example within the Slots section of the Dialogs article. At the moment, I'm struggling with the ref-activated method. This playground illustrates the issue.

To see the code, go down to the card titled "Approach 3: Ref-activated". I've got a button that is trying to invoke a dialog in component RADialog1. The problem is that I can't figure out how to pass the ref from that button to the dialog so that it opens when I click on the Ref Activator 1 button.

I've tried passing the ref as a prop but the defineProps macro objects to me passing something called ref and then typescript-annotating it as a ref. I tried using provide in the parent and inject in the dialog but I keep getting syntax errors, no matter what I try.

I'm hoping someone here can help me figure out how to pass the ref value from the parent to the dialog.

I can't see anything in the Vuetify docs that explains this. (Unfortunately, their examples all show dialogs that are coded within the parent component being invoked. I think it's a lot better to code dialogs as separate components.)

Solution

There are three issues in your code:

When providing a ref, use the ref itself, not its value:

  const trigger1 = ref('raDialog1')
  provide('refActivtor1', trigger1) // <--- instead of trigger1.value

Using trigger1.value would provide the data inside the ref at the moment provide() is called. This happens during setup, when the component is not yet mounted, so the ref will be undefined.

Typo: you provide 'refActivtor1' (missing 'a' in 'vtor1'), but try to resolve it as 'refActivator1' in RADialog1:

const refActivator1 = inject('refActivator1')

Note there is a warning in the console about a missing inject.

The activator prop of VDialog is given as regular string attribute (activator="raDialog1" resolves to the string 'raDialog1'), but it should be a Vue data binding with either v-bind:activator or the shorthand :activator:

<v-dialog 
  :activator="refActivator1"

Now the content of the 'refActivator1' variable is bound to the prop.

Here is the updated playground