nextTick:
MyItem.vue
加一个编辑按钮，input框：@blur失去焦点时触发事件handleBlur，ref获取真实dom：
<input
type="text"
v-show="todo.isEdit"
:value="todo.title"
@blur="handleBlur(todo,$event)"
ref="inputTitle"
>
<button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>
methods加俩方法:
//编辑
handleEdit(todo){
if (todo.hasOwnProperty.call('isEdit')){
todo.isEdit = true
}else {
console.log('a@@')
this.$set(todo,'isEdit',true)
}
// setTimeout(()=>{
// this.$refs.inputTitle.focus()
// },20)
this.$nextTick(function (){
this.$refs.inputTitle.focus()
})
},
//失去焦点回调（真正执行修改逻辑）
handleBlur(todo,e){
todo.isEdit=false
if (!e.target.value.trim())return alert('输入不能为空')
this.$bus.$emit('updateTodo',todo.id,e.target.value)
}App.vue:
methods:中加一个方法
//更新一个todo
updateTodo(id,title){
this.todos.forEach((todo)=>{
if (todo.id===id)todo.title=title
})
},mounted钩子中添加
this.$bus.$on('updateTodo',this.updateTodo)
beforeDestroy钩子中添加
this.$bus.$off('updateTodo')
style中加编辑按钮样式：
.btn-edit {
color: #fff;
background-color: skyblue;
border: 1px solid #0f7daa;
margin-right: 3px;
}
文章来源：https://www.toymoban.com/news/detail-607951.html
文章来源地址https://www.toymoban.com/news/detail-607951.html
到了这里，关于Vue中TodoList案例_编辑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
