How to use @save event in q-popup-edit
-
have tried
@save ="useEditLabel"
@save ="useEditLabel()"
@save="useEditLabel(null, null)"
none of this work but other events were working like@show="useEditLabel()"
@before-hide="useEditLabel()"
working but@save
and@cancel
were not<div class="q-pa-md"> <div class="cursor-pointer"> {{ accLabel }} {{test}} <q-popup-edit v-model="label" buttons @save ="useEditLabel"> <q-input v-model="accLabel" dense autofocus counter /> <template v-slot:append> <q-icon name="mode_edit" color="primary" /> </template> </q-popup-edit> </div> </div> </div>
const { ref } = Vue; const QPopupEdit = Quasar.QPopupEdit; const app = Vue.createApp({ components: { QPopupEdit }, setup() { const test = ref("to change this"); const accLabel = ref("Click Here"); function useEditLabel(e='test1',x='test2') { console.log(e); test.value = e; } return { useEditLabel, test, accLabel }; } }); app.use(Quasar, { components: { QPopupEdit } }); app.mount("#q-app");
-
You do know quasar v3 is still in beta and you’re using the composition api.
Anyway could you create a codepen.io so we can give you better support.
-
have fixed this thanks
-
would you be so kind to post what the fix was?
-
this works for me
@update:modelValue="e.accLabel = scope.value"
@keyup.enter="scope.set"
<q-popup-edit v-model="e.accLabel" buttons :validate="(val) => val.length > 0" @save="useEditLabel(e)" > <template v-slot="scope"> <q-input v-model="scope.value" dense autofocus counter :rules="[ (val) => scope.validate(scope.value) || 'More than 5 chars required', ]" @update:modelValue="e.accLabel = scope.value" @keyup.enter="scope.set" > <template v-slot:append> <q-icon name="mdi-lead-pencil" color="primary" /> </template> </q-input> </template> </q-popup-edit>
-
@diadal said in How to use @save event in q-popup-edit:
@update:modelValue=“e.accLabel = scope.value”
@keyup.enter=“scope.set”Can you provide this solution on codesandbox?
I tried emit empty Value, to Save it on Vuex and send API request.
-
For me worked the following: I added: v-slot=“scope” to the q-popup-edit
<q-popup-edit v-model=“initialValue” v-slot=“scope” buttons @save=“save”>
and then I replaced my v-model inside q-input to this:
<q-input v-model=“scope.value” >