Vue modifies the content of an input box and then clicks cancel to get the original content.

recently I am doing a vue table to add or delete the query function

clipboard.png


clipboard.png

clipboard.png
but vue he has two-way binding. I have no way to go back to the value before modification. I took the value of the current page when I first clicked the modify button. The editdoc1 (sd,index) passed by the function on the page. When I clicked on that to cancel the modification symbol, I couldn"t go back to the state before modification and checked that it was two-way binding

.

has made a requirement exactly the same as yours, and my approach is
1. When you click the edit button, get a variable to store the original form data.
this.curApiList = JSON.parse (this.form.apiListData));
2. Just restore it when you cancel the edit.
this.form.apiListData = this.curApiList;


use two values, an original value and a text box value. When modified, Synchronize will be ready


input box v-model to bind the new variable. When you click to edit, the data of the corresponding row will be assigned to the variable in turn, so that the value of table will not change. When canceled, input is hidden, left blank, and table displays the previous value. If saved, the table data will be changed


when you don't need two-way binding.
v-model is a syntax sugar =: value + @ input;.
here you can take it apart


write all the values bound by input to the value entered by the object Object, for the first time, because two-way binding will send Synchronize into this object, use the es6 method Object.assign () to make a copy and keep it, and when the input box is modified again, the last value will still be retained. If necessary, you can re-assign the past


encountered the same problem


Hello, have you solved this problem? I have encountered the same problem, but I can't think of a good solution

Menu