Popup edit: save & cancel



  • 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



  • 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}`)  
      }
    }
    ...
    


  • 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 ?



  • @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.



  • 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!!



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



  • @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>