[英]Vuetify modifying inline edit data table content from method
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.我将 props.item 传递给我定义的取消方法以进行更新。 The props.item.iron prop is synced so that should still be updated via edit dialog.
props.item.iron 道具已同步,因此仍应通过编辑对话框进行更新。
<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.我尝试更新传入的 obj 但更改未反映或传递回模型。
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?有没有办法解决这个问题,我可以在编辑对话框之外从外部更新 prop.item? 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 Codepen: https ://codepen.io/dicquack/pen/zYxGOQx ? editors = 1011 特别是第 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.编辑:因此,通过从 v-edit-dialog 返回值中取出
.sync
并将内部文本框从 v-model 更改为:value
然后我可以在编辑对话框外修改该值。 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.我遇到了另一个问题,我现在需要将新文本框
:value
传递给编辑对话框并将其传递给保存处理程序。
CodePen has been updated accordingly CodePen 已相应更新
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)您必须将更新的
iron
值传递给save()
以及对更新对象的引用,在这种情况下让我们使用name
(在实际示例中使用一些唯一的 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
字段更新 Data 对象内的铁字段,
save({name, iron}){
// update `iron` in Data object based on `name`
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.