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
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`
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.