vue对一个输入框内容进行修改然后点击取消怎么得到原内容阿

Question

最近在做一个vue的表格增删该查功能

当我点击某一行的修改按钮的时候

出现这种界面 然后我对列表的内容进行修改

但是vue他有双向绑定 我没有办法回到修改之前的值应该怎么做阿 我是先点击修改按键的时候取了一下当前页面的值在页面用函数传递的editdoc1(sd,index)我点击那个取消修改符号的时候没办法回到修改前的状态查了一下是双向绑定

Answer 1

做过一个跟你一模一样的需求，我的做法是
1.点击编辑按钮的时候,再弄一个变量存一下原始表单数据.
this.curApiList = JSON.parse(JSON.stringify(this.form.apiListData));
2.取消编辑的时候再还原就好了.
this.form.apiListData = this.curApiList;

Answer 2

用两个值，一个原始值，一个文本框的值，当修改后，同步一下就好了

Answer 3

input框 v-model绑定新的变量, 点击编辑的时候, 把对应行的数据,依次赋值给变量, 这样table的值不会改变,取消时, input隐藏,置空, table显示还是之前的值. 保存的话, 提交之后,table数据就对应都改变了

Answer 4

在不需要双向绑定的时候不要用v-model;
v-model是一个语法糖 = :value + @input;
这里你可以把它拆开来

Answer 5

把所有input绑定的值写个对象Object，第一次输进去的值因为双向绑定会同步到这个object里，使用es6方法Object.assign()拷贝一份保留下来，当输入框再次修改，上次的值还保留一份，需要的话可以重新赋值过去

Answer 6

遇到同样的问题了

Answer 7

你好，请问这个问题你解决了吗，我也遇到了同样的问题，不过没想到好的解决办法