QPopupEdit not emitting @save when the QInput is cleared.
-
I’m struggling to get QPopupEdit to emit a
@save
when the QInput is clearable. Here’s an example: https://codepen.io/dsl101/pen/XWNRZYz?editors=1011- Click on one of the edit icons
- The current value of
editLabel
changes and the popup opens - Click the ‘clear’ icon at the right of the QInput
- Click the ‘Set’ button on the popup.
I would expect to see null printed in the console, but I don’t see anything. What am I doing wrong? Note you can get
null
into the console by changing the QInput value first (and clicking ‘Set’). -
Note this is the original code which doesn’t work:
<q-btn flat round dense icon="edit"> <q-popup-edit v-model="editLabel" buttons @before-show="editLabel = label" @save="saveLabel"> <q-input v-model="editLabel" clearable></q-input> </q-popup-edit> </q-btn>
whereas this version does work:
<q-btn flat round dense icon="edit" @click="editLabel = label"> <q-popup-edit v-model="editLabel" buttons @save="saveLabel"> <q-input v-model="editLabel" clearable></q-input> </q-popup-edit> </q-btn>
The significant difference is where
editLabel
is initialised. In the@before-show
event the model is set, but apparently it is not set before the QPopupEditinitialValue
has been copied from the model. This causes__hasChanged ()
to later return false when the model is cleared back tonull
. -
What you are doing is you modify the external model, so when you press on set button QPopupEdit sees that the value you want to set is the same as the current value and does nothing.
-
I was wanting to use
@before-show
to set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would benull
and cause an@save
event. But it seems the initial value is stored before@before-show
is triggered?In any case, setting the model via the Qbtn surrounding the popup works OK.
I edited the code above to be clearer, and also updated the code pen with 2 versions (one that works and one that doesn’t). The only difference is where
editLabel
is set initially. In the QBtn@click
works, in the QPopupEdit@before-show
doesn’t. -
if faced the same issue about was able to fix this you can check in my comment https://forum.quasar-framework.org/topic/7798/how-to-use-save-event-in-q-popup-edit/4