一、需求
当鼠标悬浮时,在删除旁边,加一个编辑按钮,一点编辑,文字变为输入框,然后出现保存和取消两个按钮
如下图:
二、完成需求
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可以为空