Popup edit: save & cancel

jmg1340

I forget this info:
Quasar CLI… v0.17.20
Quasar Framework… v0.17.17

metalsadman

@jmg1340
your v-model should look like this in your setup v-model="props.row[col.field]" on both popup-edit and the q-input child inside it and use @input on your q-input instead of @change (Triggered on lazy model value change). example: https://codesandbox.io/s/lx5oqq4p97

<q-td v-for="col in props.cols" v-if="col.name.startsWith('Part')" :key="col.name" :props="props">
  {{ col.value }}
  <q-popup-edit
    v-model="props.row[col.field]"
    buttons
    label-set="Ok"
    label-cancel="Cancelar">
      <q-input
        hide-underline
        class="bg-blue-1"
        v-model="props.row[col.field]"
        @input="sumatori(props.row);" />
   </q-popup-edit>
 </q-td>

keechan

How about if I want to add another argument to the save / cancel events?

Is there a way so that I do not have to specify the ‘new’ and ‘old’ value and just pass in my 3rd argument?
@save="saved(.., .., arg3)" or something like @cancel="canceled(arg3)". If that is not possible, then what argument names can I use to get the ‘old value’?

If I do something like this, where to get initialValue value?

<q-popup-edit buttons lazy-rule v-model="props.row.value" @save=(props.row.value, initialValue, arg3)?

...
methods: {
  saved (val, initialValue, arg3) {
    console.log(`original value = ${initialValue}, new value = ${val}`)
    console.log('argument3 = ' + arg3)
  },
  canceled (val, initialValue, arg3) {
    console.log(`retain original value = ${initialValue}, canceled value = ${val}`)  
    console.log('argument3 = ' + arg3)
  }
}
...

metalsadman

@keechan use an arrow function like so. @save="(v, iv) => { someHandler(v, iv, arg1, arg2, ...) }"

keechan

Great, it works now! Thank you!

j-ho

It appears that clicking away from a popup-edit when changes have been made emits a cancel instead of save event. Is there some way to control this behavior?

Quasar v1.12.5

metalsadman

@j-ho

j-ho

Fantastic, can’t believe I missed that. Thanks.

ghadaYoussef

hey all, I was wondering how to prevent closing the popup edit when clicking on enter?

metalsadman

@ghadaYoussef catch the event ie. @keydown.enter.stop.

No More Posting New Topics!

Popup edit: save & cancel