I am facing a challenge while attempting to update the value in my inline edit data table from a method. The issue lies in the fact that the item I pass is not getting updated.
In my cancel method, I pass props.item to be updated. While props.item.iron property is synced, it should still get updated via the 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>
Although I attempt to update the provided object, the change does not reflect or pass back up to the model.
cancel (item) {
console.log(item)
item.iron = 'clear'
}
Is there a workaround to allow me to externally update the prop.item from outside the edit dialog? My primary reason for this is that when a new value is saved, a request is made, but if the request fails, I want to clear the value from the table.
Codepen: https://codepen.io/dicquack/pen/zYxGOQx?editors=1011 Specifically line 116
EDIT:
By removing the ".sync" from the v-edit-dialog return value and changing the inner textbox from v-model to :value, I can now modify the value outside the edit dialog. However, I am now faced with another issue where I need to pass the new textbox :value to the edit dialog and then to the save handler.
The CodePen has been updated accordingly.