I’ve run into some weird behavior with QDialog and with $refs. I don’t know if they’re the same problem or two separate issues. Here it goes.
I have a component called UserRegistration, that is essentially a dialog that collects the user data for registration. So it looks something like:
<q-dialog v-model="isOpen" persistent>
<q-bar dark class="bg-primary text-white">
<q-btn dense flat rounded icon="close" @click="handleCancel">
<q-btn flat color="primary" label="OK" @click="handleOK" />
<q-btn flat color="secondary" label="Cancel" @click="handleCancel" />
The RecordInputForm is a list of QField, one for each field in
this.record as defined by
The first time I ran the code I encountered problem #1:
this.$refs was an empty object. I used
console.log to look for its value in
mounted and in
handleOK. In all three cases it was empty, no fields whatsoever. This does not make sense, since I have a
ref="inputForm" set on the
I set a ref on the QDialog and then I started seeing the value of $refs as:
dialog: ...., // QDialog component
Again this happened on
mounted and in
handleOK. I figured maybe in
mounted the content of the dialog is not actually created, but in
handleOK it should be, since it is displayed. So I added
handleOK. And that returned a Vue component that was the RecordInputForm. At the same time though, $refs showed an
inputForm field with an
So I am looking for some kind of explanation of what happens here. When are components that are the contents of a QDialog created? And more importantly, when would a component that has a
ref attribute show in
Problem #2 showed when I started looking at the Vue dev tools in Chrome. While the QDialog is listed in the component tree, it shows no children, even when the dialog is displayed. Not only that, but using the finder to locate for example the OK button, locates nothing. It’s as if the QDialog is empty, no children whatsoever. Which I know it is not true, since I wrote the code, and I can see the content on the page.
I will mention problem #3, although I think it deserves a separate discussion. Debugging does not work. VS Code refuses to set breakpoints, and that’s the end of that.
debugger statements are not reliable. Sometimes they work, other times they don’t. And sometimes it stopped in code from one or the other package that I use in the project, without me setting any kind of breakpoint there. Really weird behavior. Quasar 0.x did not have this problem. Something got broken in 1.0 and it needs a fix. Badly. The Quasar docs have a section about debugging in VS Code, but it is empty.