Popup edit: save & cancel

jmg1340

Hi,
I don’t understand how do save and cancel events work. Can you give-me an example with:
@save(val, initialValue) Edit is successful and the value gets saved
@cancel(val, initialValue) Edit has been cancelled and the value gets reverted to its original form

metalsadman

q-popup-edit will emit save event on pressing enter key, clicking away from the component or if you press save/set button (if you enabled Buttons) if the initialValue has changed, cancel event will be emitted if you press escape key or if you press cancel button (buttons enabled) any edit will revert to its initialValue.

if you want to check the values emitted from those event you pass a method like so @save="saved" and @cancel="canceled".

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

jmg1340

So, in the popup edit element, do I need to set a any event beside the other properties? Because I haven’t see it. For example:
<q-popup-edit v-model=“props.row.name” BUTTONS LABEL-SET=“OK” LABEL-CANCEL=“NO” @EVENT_TO_SET=“SAVED” @EVENT_TO_CANCEL="@CANCELED">
<q-field count>
<q-input v-model=“props.row.name” />
</q-field>
</q-popup-edit>

On the other hand, in the CANCELED HANDLER, how do I set the original value (initialValue). That is to say: Do I Have to put a command like this: props.row.name = initialValue ?

metalsadman

@jmg1340 said in Popup edit: save & cancel:

On the other hand, in the CANCELED HANDLER, how do I set the original value (initialValue). That is to say: Do I Have to put a command like this: props.row.name = initialValue ?

you don’t need to. like i said, the value will revert back to initialValue when cancel event is emitted. if you want to do other operations after any event is emitted on the component then you pass a method like in my example above, otherwise just leave it be.

jmg1340

Ok, understood what you said.
I must be doing something wrong because when I cancel, it saves the new value instead of remaining the original value.

my Code is:

      <q-td v-for="col in props.cols" v-if="col.name.startsWith('Part')" :key="col.name" :props="props">

        {{ col.value.valor }}

        <q-popup-edit 
          v-model="col.value.valor" 
          title="punts" 
          color="red-14"
          buttons
          label-set="Ok"
          label-cancel="Cancelar"
          >
          <q-input 
            v-model="col.value.valor"
            type="number"
            align="center"
            hide-underline
            class="bg-blue-1"
            @change="sumatori(props.row)"
          />
        </q-popup-edit>
      </q-td>

… and I have no handlers for cancel and save.

Thank you very much for your help!!

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

my Code is: