TodoList案例

TodoList案例

一、需求

当鼠标悬浮时，在删除旁边，加一个编辑按钮，一点编辑，文字变为输入框，然后出现保存和取消两个按钮
如下图：

二、完成需求

1、增加按钮

MyItem.vue

效果：

2、完成编辑

在每一个todo的身上，追加一个属性，isEdit
如果isEdit为真，则是一个input框
如果isEdit为假，则正常展示一个文字，如下图

MyItem.vue

注意：
如果直接:todo.isEdit=true
发现点击编辑之后没效果，
原因是因为当前只是往toso身上添加了一个属性，没有对应的gette和setter，
数据相当于没有改变，点击后模板不会重新解析

3、完成切换

当失去焦点时，重新从input框变为正常文字

MyItem.vue


效果：

4、代码完善

观察如下代码：
第一次点击编辑，往todo上添加isEdit属性
第二次点击时，还是往todo上添加isEdit属性，把上一个isEdit顶掉

5、数据改变

在失去焦点的时候，联系app，改掉title

5.1 使用$event




App.vue


效果：

完善：当处于编辑状态时，编辑按钮应不存在

目前仍然存在问题：
多个todo存在时，点完一个编辑，不想编辑了，发现无法从编辑状态切换回来；
并且刷新时还是这样即：不想编辑的时候，还要点一下才能不编辑原因：失去焦点需要先获取到焦点才能触发，都没有获取焦点来更改
解决：下一小节解决

还有一个问题，todo的title可以为空