QPopupEdit not emitting @save when the QInput is cleared.
I’m struggling to get QPopupEdit to emit a
@savewhen 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
editLabelchanges 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
nullinto 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
editLabelis initialised. In the
@before-showevent the model is set, but apparently it is not set before the QPopupEdit
initialValuehas been copied from the model. This causes
__hasChanged ()to later return false when the model is cleared back to
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-showto set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would be
nulland cause an
@saveevent. But it seems the initial value is stored before
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
editLabelis set initially. In the QBtn
@clickworks, in the QPopupEdit
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