Popup edit: save & cancel

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: