效果图
部分代码
myItem.vue
这里用到了hasOwnProperty()方法,可以检验数组中是否包含该属性
注意在这里必须要是用$set()方法才可以,不然不会生成getter和setter
在点击编辑时时这里使用了 $nextTick 才可以获取焦点哦
$nextTick
1.语法:this. $extTick(回调函数)
2.作用:在下一次DOM更新结束后执行其指定的回调
3.什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
<template>
<div class="itemContent">
<div class="inputList">
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
<div v-show="!todo.isEdit"> {{todo.title}}</div>
<input v-show="todo.isEdit" :value="todo.title" @blur="blurEdit(todo,$event)" type="text" ref="inputEdit">
</div>
<div class="btnList">
<div v-show="!todo.isEdit" class="delBtn edit" @click="handleEdit(todo)">编辑</div>
<div class="delBtn" @click="handleClear(todo.id)" >删除</div>
</div>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name: 'MyItem',
// 声明接收todo对象
props: ['todo'],
methods: {
// 勾选
handleCheck(id) {
this.$bus.$emit('checkTodo', id)
},
//删除
handleClear(id) {
if (confirm('确认要删除吗?')) {
pubsub.publish('clearTodo', id)
}
},
// 编辑
handleEdit(todo){
if(todo.hasOwnProperty('isEdit')){
todo.isEdit = true
}else{
this.$set(todo,'isEdit',true)
}
this.$nextTick(function(){
this.$refs.inputEdit.focus()
})
},
// 失去焦点回调(真正执行修改逻辑)
blurEdit(todo,e){
this.$bus.$emit('updateTodo',todo.id,e.target.value)
todo.isEdit = false
}
},
beforeDestroy() {
}
}
</script>
app.vue
...
methods:{
// 更新一个todo
updateTodo(id,value){
this.todos.forEach((todo)=>{
if(todo.id===id){
todo.title = value
}
})
}
}
...
一点小知识!!!