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.

How can I 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.)

Refs can be passed down just like any prop. You don’t necessarily need provide/inject.

App.vue

<v-btn class="indent" color="indigo" ref="trigger1"
  >Ref Activator 1
</v-btn>
<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

const trigger1 = ref()

Side note: When defining a ref, the value wrapped by the ref is considered the initial value. You originally had ref('raDialog1'), which is a ref with initial string value “raDialog1”, but once the component mounts, this initial value is overwritten with the VBtn component. It’d be better to just let the initial value be null, e.g. ref()

RADialog1

<v-dialog max-width="360" persistent :activator="activator">

const props = defineProps(['verbiage', 'activator'])

You mentioned typescript error before. If you want typescript to be happy, you can define props like this

<script setup lang="ts">
  import type { PropType, ComponentPublicInstance } from 'vue'

  const props = defineProps({
    verbiage: { type: String },
    activator: {
      type: Object as PropType<ComponentPublicInstance>
    }
  })
</script>

Playground example

Simpler Alternative

There’s actually a shortcut here since the root element of RADialog is v-dialog, assigning the activator to RADialog will have it fallthrough to the v-dialog (provided you don’t declare the activator as a prop in RADialog).

App.js

<RADialog1 :verbiage="ra_prop1" :activator="trigger1" />

Now just don’t declare any activator prop in RADialog1.

RADialog1.vue

<v-dialog max-width="360" persistent>

const props = defineProps(['verbiage'])

Playground example

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

Filed under: Kiến thức lập trình - @ 02:26

Thẻ: vuejs3vuetifyjs3

Thiết kế website giá rẻ

Danh mục

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

Simpler Alternative