Vue学习：todolist 编辑

item里面设置：对于是否显示编辑

  <span  v-show="!todo.isEdit">{{todo.title}}</span>
            <input  type="text" 
                    v-show="todo.isEdit"
                    :value="todo.title" 
                    @blur="handleBlur(todo)">  <!--处理失去焦点 就是span --> 

使用追加属性，要对应的get set

        //编辑按钮
              edit(todo){
                //追加只需要一次
                if(todo.hasOwnProperty('isEdit')){
                    todo.isEdit=true

                }else{ // todo.isEdit=true --不可以没有set he gey
                    this.$set(todo,'isEdit',true)//追加的
                }
            },

当失去焦点变成正常文字——真正指向回调

//失去焦点
            handleBlur(todo){
                todo.isEdit=false//前面已经有了
                
            }

接收输入框传入的参数

    @blur="handleBlur(todo,$event)"

    handleBlur(todo,e){
                todo.isEdit=false//前面已经有了
                this.$bus.$emit('updateTodo',todo.id,e.target.value)//绑定
                
            }

更新去APP.vue中

       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',this.updateTodo)
         
        },

存在问题：当你点击 但是没有进行焦点 之间失去焦点就会存在问题

还要一个编辑全部删除了也有问题

失去焦点的时候完成

       //失去焦点
            handleBlur(todo,e){
                todo.isEdit=false//前面已经有了
               if(!e.target.value.trim()) return alert('输入不能为空')
                //拿到最新的输入框的值
                this.$bus.$emit('updateTodo',todo.id,e.target.value)//绑定
                
            }