No, up to now it does nothing. I wrote it due to a warning in the console. I’m pritty new to JS, VUE and Quasar ;=)
I now found, that all is obviously the same thing as in the mentioned post, above. When I update in @input my vuex state, save will be fired. And it works then also with v-model. But input fires on each keystroke, right? Therefore you gave the hint, one should have a local copy of the vuex state, right? But this seems pritty complicated to me.
Thank you ;=)
I found this:
@metalsadman Thank you for the codepen!!
I didn’t get that @save only fires if the value has changed. Makes sense now.
Before writing my actions and mutations, I was trying to test with console logs, but since I wasn’t modifying my state (yet), the saves weren’t firing at all.
@sontis: I’m grabbing the @save event on the q-popup-edit and calling an action to write to my API. On the q-input inside the popup, I’m grabbing @input and calling a mutation to set the vuex store.
Now that the state is actually changing, q-popup-edit fires the @save event when I click the “set” button, and the API only gets hit then, not on every keystroke.
So I added the @input event to my input field:
<q-input v-model="dueDate" @input="(v) => {input(v)}" dense autofocus />
and im my methods
input (val) {
console.log(val, 'input')
this.dueDate = val
}
but no save event was comming.
Oh I changed it once again - vom v-model to :value, but no result:
<q-input :value="dueDate" @input="(v) => {input(v)}" dense autofocus />
Axel
Hello
I see that only @hide and @show events will be emited, neither @save nor @cancel:
<div>
{{ dueDate }}
<q-popup-edit
v-model="dueDate"
@hide="hide(dueDate)"
@show="show(dueDate)"
@save="(val, iVal) => save(val, dueDate)"
@cancel="cancel(dueDate)"
>
<q-input v-model="dueDate" dense autofocus />
</q-popup-edit>
</div>
computed: {
dueDate: {
set (dueDate) {
},
get () {
return (this.project.due_date)
? this.$d(new Date(this.project.due_date), 'short')
: ''
}
}
},
methods: {
save (val, iVal) {
console.log(val, iVal, 'save')
},
show (val) {
console.log(val, 'show')
},
hide (val) {
console.log(val, 'hide')
},
cancel (val) {
console.log(val, 'cancel')
}
}
When I open the field and change the value, in vue console are apearing the events before-show, input, focus, show, change , before-hide , hide .
My template markup follows the example in the Quasar docs “https://quasar.dev/vue-components/popup-edit#Example-outside-of-QTable”
<div class="cursor-pointer">
{{ label }}
<q-popup-edit v-model="label">
<q-input v-model="label" dense autofocus counter />
</q-popup-edit>
</div>
Does anybody has an idea, what might go wrong here? Any hint is greately appreciated. Thany you
Axel
Hello, I use Font Awesome Line Icons for my app. But for some components I would like to use meterial icons, as the caret für dropdown buttons. Is there a way to achieve this?
Thank you
Axel