Quasar: QPopupEdit in QTable without v-model doesn't emit save event

[Ragura]

Describe the bug
The bug is the exact same as the one described in closed issue #4128. The issue creator closed it after a separate discussion about this problem here and finding a "workaround" that comes with its own UX problems. However, I believe it still walks a thin line between a feature and a bug.

In short: QPopupEdit does not fire the save event when nothing has changed in the data source. I understand this behaviour is as expected. However, when using the :value prop instead of working with v-model, for example in a Vuex state binding use case, we should be able to have the save event (or a separate event) fire to catch the change and dispatch an action (such as a request to an API).

Expected behavior
I expect to be able to catch changes to the popupEdit's value without the use of v-model or without the need to actually change the bound value directly. Looking at the underlying code, I understand that retrofitting the @save event might be difficult. However, every other component that you'd use in a table does support the decoupling of value and a change/input event, allowing Vuex state binding to work seamlessly.

In short, developers using Vuex don't have many options to use the edit in place UX strategy without a change to QPopupEdit. Making a local copy circumvents the problem, but at great cost (deep copy, deep watchers, change evaluators, out of sync state, ...).

[rstoenescu]

Hi,

The best solution to this is to create a very basic Vue component that wraps the QPopupEdit. If we are to make changes to the QPopupEdit, trust me, you won't like it.

Main idea is that your wrapping component will maintain its state and it is going to update the upper model only on @save. It may look like this:

<template>
  <q-popup-edit v-model="model" @save="onSave">
    <q-input v-model="model" dense autofocus/>
  </q-popup-edit>
</template>

<script>
export default {
  name: 'MyPopupEdit',

  props: {
    value: String
  },

  data() {
    return {
      model: this.value
    }
  },

  methods: {
    onSave(value) {
      this.$emit('input', value)
    }
  }
}
</script>

[rstoenescu]

And you can use it like this:

{{ value }}
<my-popup-edit v-model="value" />

or:

{{ value }}
<my-popup-edit :value="value" @input="val => { ....... }" />

[Ragura]

I have no idea why I was looking for 50 ways to work around the problem when the solution is so simple. Cursed tunnel vision. And I had even looked at the q-popup-edit component's source code and also really didn't see a way to "fix" it with the way it is built around the save() event. So this is in my opinion not only the perfect solution, but the only real solution.

Thank you very much!

[rstoenescu]

Glad I could help!