todolist, 修改编辑时为空的处理逻辑，添加nextTick的使用方法学习

20_脚手架/vue_code/src/components/TodoItem.vue

@@ -3,7 +3,7 @@
     <label>
       <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
       <span v-show="!todo.isEdit">{{ todo.title }}</span>
-      <input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" :value="todo.title">
+      <input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" ref="inputFocus" :value="todo.title">
     </label>
     <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
     <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
@@ -35,12 +35,15 @@ export default {
       }else {
         this.$set(todo, 'isEdit', true)
       }
+      this.$nextTick(function () {
+        this.$refs.inputFocus.focus()
+      })
     },
     // 失去焦点时更新数据
     handleBlur(todo, e) {
       todo.isEdit = false
-      // console.log('updateTodo', todo.id, e.target.value)
-      if (e.target.value.trim()) return alert("输入不能为空！")
+      console.log('updateTodo', todo.id, e.target.value)
+      if (!e.target.value.trim()) return alert("输入不能为空！")
       this.$bus.$emit('updateTodo', todo.id, e.target.value)
     }
   }