TodoList案例 对MyItem.vue组件进行升级，添加一个编辑功能；

对MyItem.vue进行升级

先添加一个编辑按钮

<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>

描述一下想做的功能：

当鼠标点击“编辑”时候，原来todo项的标题变成一个输入框，并且把原来的标题填入input框，同时让input框聚焦，原来的<span>标签则隐藏.当input框失去焦点的时候真正保存数据

解决思路：

1.在原来的<span>{{todo.title}}</span> 下面。在设计添加一个<input>输入框

2.在todo数据上再添加一个属性isEdit，布尔值，让其控制<input>输入框是否显示

3.当鼠标点击“编辑”时候，input框显示出来，并且把原来的标题填入input框，同时让input框聚焦，原来的<span>标签则隐藏.

4.当input框失去焦点的时候真正保存数据

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['todo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				// this.checkTodo(id)
				this.$bus.$emit('checkTodo',id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					// this.deleteTodo(id)
					// this.$bus.$emit('deleteTodo',id)
					pubsub.publish('deleteTodo',id)
				}
			},
			//编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true)
				}
				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)
			}
		},
	}
</script>

<style scoped>
	...
</style>

代码解释

<span v-show="!todo.isEdit">{{todo.title}}</span>

<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
>

新添加一个input

v-show="todo.isEdit" 显示或者隐藏交给这个属性来维护

value="todo.title" 绑定todo对象的标题到这个input上

@blur="handleBlur(todo,$event)" 绑定失去焦点的回调函数‘’

ref="inputTitle" 命名

//编辑按钮点击
handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
},

点击编辑按钮执行上面代码

判断todo对象是否存在isEdit属性，如果已经存在，就把属性设置成true;

如果属性不存在，就用 this.$set(todo,'isEdit',true) 方法给todo对象添加属性isEdit，并且值设置为true;

之后，再用 this.$nextTick api 让input框聚焦

//失去焦点回调（真正执行修改逻辑）
handleBlur(todo,e){
		todo.isEdit = false
		if(!e.target.value.trim()) return alert('输入不能为空！')
		this.$bus.$emit('updateTodo',todo.id,e.target.value)
}

失去焦点回调（真正执行修改逻辑）

让todo对象的isEdit属性设置成false

触发事件总线上的updateTodo事件，并且把id和新的标题传过去给回调函数

注意这里加了个细节处理，当新的输入框没有任何文字的时候，弹出警告并且代码停止

App.vue 组件

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader @addTodo="addTodo"/>
				<MyList :todos="todos"/>
				<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//更新一个todo
			updateTodo(id,title){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.title = title
				})
			},
			//删除一个todo
			deleteTodo(_,id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		},
		mounted() {
			this.$bus.$on('checkTodo',this.checkTodo)
			this.$bus.$on('updateTodo',this.updateTodo)
			this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
		},
		beforeDestroy() {
			this.$bus.$off('checkTodo')
			this.$bus.$off('updateTodo')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style>
	...
</style>

代码解释

	//更新一个todo
			updateTodo(id,title){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.title = title
				})
			},

添加一个更新一个todo的逻辑

this.$bus.$on('updateTodo',this.updateTodo)

在事件总线上进行注册updateTodo事件，这样MyItem组件就可以触发这个事件了

nextTick 总结(Tick有一瞬间的意思)

1. 语法：this.$nextTick(回调函数)

2. 作用：在下一次 DOM 更新结束后执行其指定的回调。就是双向绑定视图改变后执行回调

3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

代码摘录于尚硅谷Vue学习课件