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

[awustemann]

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

[awustemann]

from https://forum.quasar-framework.org/topic/3607/solved-qpopupedit-in-qtable-with-vuex-data-source-do-not-emitted-save-event/15

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

[metalsadman]

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

[awustemann]

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