Vue+element实现todo（四）

（一）编辑item
现在data里添加一个newtodotitle的属性，以防我们不想编辑回答原来的值，另一个就是无论是否在编辑状态。输入框总是会出现，再在data里添加一个edittodo的属性，就是说，如果edittodo为空，则一定不在编辑状态

image.png

然后再给I标签绑定一个点击事件，当点击时，输入框才会出现，

image.png

这里我们使用了一个全新的对象存储，如果不这样做的话，我们对item的任何修改都会反应到editTodo，为防止这样情况，我们要为editTodo创建一个全新的对象。
这时点击I标签，发现所有的输入框都出现了，我们需要再增加一个条件，只有item的ID和editTodo的ID相等时，才表示此item正在编辑，

image.png

然后将Item的值跟Input绑定，使用v-model，item 的 title 就会跟着编辑框输入的值来变化了，而且想反悔随时还原，因为已经把编辑前的状态存到editTodo里了，

接下来就是敲击回车，先绑定一个editDown事件

image.png

因为item.title就是跟随输入框变化的，所以直接把editTodo的值直接清空，这样v-if的判断也会失效，编辑框也会隐藏。

image.png

如果要取消，再绑定一个事件cancelEdit事件

image.png

把编辑的 item 标题还原，我们的原始信息存在 editedTodo，取出来即可，然后把editTodo的值直接清空

image.png

（二）自动聚焦
现在还有一个问题，就是我们点击后，不能自动聚焦，需要手动才可以编辑，input 元素有一个 focus 方法，问题是如何在vue中获取，从而操作他，Vue 的自定义指令可以完成这个功能。官方文档让我们自己注册一个指令，指令就是之前写到的v-if，v-model这些，然后实现钩子函数，指定被绑定元素的行为，按照官方文档比葫芦画瓢实现一个focus指令，

image.png

然后就可以使用这个指令，绑定到input框，因为元素一旦出现一定要聚焦的，所以条件始终为 true。

image.png

这样用户体验就会好很多~