Vuetify modifying inline edit data table content from method

Question

I'm trying to update the value in my inline edit data table from a method but I've been running into issues where the item I'm passing isn't getting updated.

I pass the props.item to my defined cancel method to be updated. The props.item.iron prop is synced so that should still be updated via edit dialog.

 <template v-slot:item.iron="props">
          <v-edit-dialog
            :return-value.sync="props.item.iron"
            large
            persistent
            @save="save"
            @cancel="cancel(props.item)"
            @open="open"
            @close="close"
          >
            <div>{{ props.item.iron }}</div>
            <template v-slot:input>
              <div class="mt-4 title">Update Iron</div>
            </template>
            <template v-slot:input>
              <v-text-field
                v-model="props.item.iron"
                :rules="[max25chars]"
                label="Edit"
                single-line
                counter
                autofocus
              ></v-text-field>
            </template>
          </v-edit-dialog>
       </template>

I try to update the passed in obj but the change isn't reflected or passed back up to model.

   cancel (item) {
      console.log(item)
      item.iron = 'clear'
    }

Is there a way around this where I can update the prop.item externally from outside the edit dialog? My main use case is I have a request being made when a new value is saved, but I want to clear the value from the table if the request failed.

Codepen: https://codepen.io/dicquack/pen/zYxGOQx?editors=1011 Specifically line 116

EDIT: So by taking out the .sync from the v-edit-dialog return value and changing the inner textbox from v-model to :value then I'm able to modify the value outside the edit dialog. I'm running into another issue where I now need to pass the new textbox :value to the edit dialog and pass it to save handler.

CodePen has been updated accordingly

M. khalil M. khalil · Accepted Answer · 2019-12-04T22:02:41

You have to pass the updated iron value to save() along with reference to the updated object in this case let's use name (in real example use some unique id)

          <v-edit-dialog
            :return-value.sync="props.item.iron"
            large
            persistent
            @save="save({name : props.item.name, props.item.iron})"
            @cancel="cancel(props.item)"
            @open="open"
            @close="close"
          >

in save() implementation , update iron field inside Data object based on name field,

save({name, iron}){
//  update `iron` in Data object based on `name` 
}

Vuetify modifying inline edit data table content from method

1 Answers