Can't get QPopupEdit to run (w/o QTable)

  • Hello

    I see that only @hide and @show events will be emited, neither @save nor @cancel:

              {{ dueDate }}
                @save="(val, iVal) => save(val, dueDate)"
                <q-input v-model="dueDate" dense autofocus />
    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 “

    <div class="cursor-pointer">
          {{ label }}
          <q-popup-edit v-model="label">
            <q-input v-model="label" dense autofocus counter />

    Does anybody has an idea, what might go wrong here? Any hint is greately appreciated. Thany you


  • from

    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 />


  • @awustemann your computed prop setter dueDate: { set (dueDate) { // suppose to set something here no? }, doesn’t do anything.

  • @metalsadman

    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 ;=)

Log in to reply