Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dialog plugin - template refs are not set when using custom dialog component

See original GitHub issue

What happened?

When using Dialog plugin with custom component, the template refs that are within the custom dialog component are not set.

Check the jsfiddle below. My expectation is that in the onMounted hook the cardRef would be set but it’s not. Even with nextTick it is still not set.

What did you expect to happen?

Expect template refs to be set and valid within onMounted hook.

Reproduction URL

https://jsfiddle.net/ddenev/ruhxv3md/37/

How to reproduce?

Go to the reproduction link
Make sure the console is visible
Hit the “Open Dialog” button
Observe that cardRef value is null in the console

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), Plugins (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

pdanpdancommented, Jun 7, 2022

No, onMounted is called when your custom component (that has the dialog in it) is rendered. But that component is rendered before the dialog is opened. BTW, cardRef is not returned from setup, so it would not work anyway.

Working example (listening for @show): https://jsfiddle.net/ozcLufgd/3/

1reaction

pdanpdancommented, Jun 7, 2022

It’s native Vue behaviour to only set the refs when the element with the ref is rendered. The content of QDialog is a slot, and that slot is rendered only when the dialog is opened. So the refs inside QDialog are set when the dialog is opened and the refs on QDialog are set when the custom component is rendered.

Top Results From Across the Web

Dialog Plugin - Quasar Framework

A Quasar plugin that provides an easy way to display a prompt, choice, confirmation or alert in the form of a dialog.

How do I use slots with a Quasar Dialog Plugin custom ...

I want to make a custom component for the Quasar Dialog. And inside that component I want to use slots, but I'm not...

Getting started with Vue Dialog component - Syncfusion

This section explains how to create a simple Dialog and how to configure the Dialog component. Prerequisites. System requirements for Syncfusion Vue UI ......

Dialog - Kirby CMS

A dialog can easily be combined with a form by using the k-form component. It's important though to setup the submit events correctly....

How to use a parent (Dialog) component - Quasar forum

Hi,. I would like to create a default parent component from a QDialog. I have created a component/DefaultDialog.vue: <template> <q-dialog ...