自增ID已经完成，那么添加编辑时绑定，按照上面的步骤，先添加编辑按钮，在删除按钮后添加编辑按钮,并在methods对象中增加对应的回调函数，对edit操作进行响应，函数中主要实现对todoItem对象进行绑定操作，具体代码修改如下：
<table> <tr> <th></th> <th>title</th> <th>desc</th> <th></th> </tr> <tr v-for="(todoItem,index) in todolist"> <th>{{todoItem.id}}</th> <td>{{todoItem.title}}</td> <td>{{todoItem.desc}}</td> <td> <input type="button" value="remove" @click="remove(index)" /> <input type="button" value="edit" @click="edit(todoItem.id)" /> </td> </tr> </table>
methods: { edit: function (id) { //找到id值等于所传参数的todoitem var obj = this.todolist.filter(v => v.id === id)[0]; //对数据进行绑定，则数据会响应到表单上 this.todoItem = obj; }, ...省略其它 }
这样有没有问题呢？我们运行看一下效果：
从运行结果上看，我们点击edit操作，的确完成了绑定，但是在我们修改编辑，还没有点击OK按钮的情况下，表单中的变化已经提现到了列表中，这就不符合正常逻辑了，为什么会有这样的情况呢，原因就在于this.todoItem=obj;这句代码就是所谓的引用赋值，所以todoitem和obj指向的是同一个地址，则对this.todoItem的修改，会直接反应到obj上，也就是todoList中的这个元素上，所以在列表中会直接提现出来，避免这种情况的发生的方法，只要避免饮用赋值即可，所以对上述代码进行如下修改：
//找到id值等于所传参数的todoitem var obj = this.todolist.filter(v => v.id === id)[0]; //对数据进行绑定，则数据会响应到表单上 this.todoItem = { id:obj.id, title:obj.title, desc:obj.desc };
刷新运行，发生程序按照预期运行了，接下来，增加更新保存操作，修改OK按钮的事件绑定方式为save，并通过id判断新增还是修改操作：
<div> <div> <label for="title">title:</label> <input type="hidden" v-bind:value="todoItem.id" /> <input type="text" v-model="todoItem.title"> </div> <div> <label for="desc">desc</label> <input type="text" v-model="todoItem.desc"> </div> <div> <input type="button" value="OK" v-on:click="save()" /> </div> </div>
methods: { edit: function (id) { //找到id值等于所传参数的todoitem var obj = this.todolist.filter(v => v.id === id)[0]; //对数据进行绑定，则数据会响应到表单上 this.todoItem = { id: obj.id, title: obj.title, desc: obj.desc }; }, save: function () { if (this.todoItem.id) { //编辑保存 var obj = this.todolist.filter(v => v.id === this.todoItem.id)[0]; obj.title = this.todoItem.title; obj.desc = this.todoItem.desc; } else { //新增保存 this.todolist.push( new TodoItem( this.todoItem.title, this.todoItem.desc ) ); } //重置表单 这部分笔误，在实际代码中已修改，但是贴上来的代码没有做修改，具体见最下面代码，错误原因见下方回复 this.todoItem = {}; }, remove: function (index) { this.todolist.splice(index, 1); } }
代码比较简单，这里就不再赘述，可以看一下运行效果：
为了逼格更高一点，这里我再介绍一个指令，其实上面已经使用了，v-bind ，这个指令和v-on是类似的，两者的区别在于后面的参数不同，一般v-bind用来传递属性参数，一般使用缩写形式:attr,可以绑定自定义属性，上面代码中我们对Id值的绑定已经使用了v-bind:value="todoItem.id",这里相当于angular中ng-bind。基于对v-bind的了解，我们可以推理，给v-bind添加disable的属性，使OK按钮只有再title不为空的前提下再可用。
<div> <input type="button" value="OK" v-on:click="save()" :disabled='!todoItem.title'/> </div>
刷新运行：
