Vue TodoList案例增加编辑功能

编辑功能实现

App.vue 中增加样式

.btn-edit {
  color: #ffffff;
  background-color: skyblue;
  border: 1px solid skyblue;
  margin-right: 10px;
}

同时增加修改 todo 的方法，同时绑定

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

mounted() {
    ......
    this.$bus.$on("updateTodo",this.updateTodo)
  },
  destroyed() {
    ......
    this.$bus.$off("updateTodo")
  }

Item.vue 中增加编辑按钮，使用增加的样式

增加点击事件 handleEdit，使用isEdit来判断是否处于编辑状态。这个方法中先判断有没有 isEdit 属性，如果没有则追加，如果有则直接改为 true

增加 input ，值和 span 中显示的值一样，如果是编辑状态则展示。而 span 则相反

同时 input 增加失去焦点事件 handleBlur，当失去焦点时，修改 todo 的值

<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 {
  ......
    //编辑
    handleEdit(todo){
      if(Object.prototype.hasOwnProperty.call(todo, 'isEdit')){
        todo.isEdit = true;
      }else{
        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>

nextTick

1.语法this.$nextTick(回调函数)
2.作用：在下一次DOM更新结束后执行其指定的回调
3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在 nextTick 所指定的回调函数中执行