Popup edit: save & cancel



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


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


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



  • Great, it works now! Thank you!



  • 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





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


Log in to reply