Vue nextTick

一、$nextTick

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

        2.作用：在下一次DOM更新结束后执行其指定的回调。

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

.......................

this.$nextTick(function(){

        this.$refs.todoEdit.focus()

})

.......................

 二、TodoList_编辑

        在之前所写的TodoList案例中已经有了增添和删除，在这里添加编辑功能。添加一个编辑按钮和一个input框，作为编辑功能的DOM。

/* todoItem组件 */...............  修改............... ............. methods:{ ............. todoEdit(todo){ if(todo.hasOwnProperty(\'isEdit\')){ todo.isEdit = true } else{ this.$set(todo,\'isEdit\',true) } this.$nextTick(function(){ this.$refs.todoEdit.focus() }) }, doneEdit(todo){ todo.isEdit = false this.$bus.$emit(\'todoEdit\',todo.id,this.$refs.todoEdit.value) }, loseFocus(){ this.$refs.todoEdit.blur() } ............. } .............

/* App组件 */  methods:{ .............. todoEdit(id,value){ this.todoList.forEach(item=>{ if(item.id === id) item.text =value }) }, .............. }, mounted(){ this.$bus.$on(\'todoEdit\',this.todoEdit) }, beforeDestroy(){ .............. this.$bus.$off(\'todoEdit\') .............. }