Vue实现ToDolist

<template>
  <div>
    <header>
      <div>LcToDo</div>
      <!-- 绑定回车事件v-model绑定输入框的值 -->
      <input
        type="text"
        id="input"
        @keydown.enter="enterEvent"
        v-model="inputValue"
        placeholder="请输入待办事件"
      />
      <button @click="add">确定</button>
    </header>
    <div class="list">
      <h3><span>正在进行</span><span>0</span></h3>
      <div
        class="todoItem"
        v-for="(item, index) in doingList"
        :key="(item, index).id"
      >
        <input type="checkbox" @click.prevent="checkDone(item.id)" />
        <div>{{ item.concat }}</div>
        <div class="del" @click="del(item.id)">删除</div>
      </div>
    </div>
    <div class="done">
      <h3><span>完成</span><span>0</span></h3>
      <div
        class="todoItem"
        v-for="(item, index) in doneList"
        :key="(item, index).id"
      >
        <input type="checkbox" @click.prevent="checkDone(item.id)" />
        <div>{{ item.concat }}</div>
        <div class="del" @click="del(item.id)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todoList: [],
      inputValue: "",
      isDone: true,
    };
  },
  methods: {
    enterEvent: function(e) {
      //回车案件
      //将数据添加到todoList
      this.todoList.push({
        concat: this.inputValue,
        isDone: false,
        id: this.doingList.length,
      });
      this.sevaData();
      this.inputValue = "";
      // console.log(this.todoList)
    },
    //确定按钮
    add() {
      //将数据添加到todoList
      this.todoList.push({
        concat: this.inputValue,
        isDone: false,
        id: this.doingList.length,
      });
      this.sevaData();
      this.inputValue = "";
    },
    sevaData: function() {
      //将数据保存到本地存储 ，将数组变成字符串
      localStorage.todoList = JSON.stringify(this.todoList);
    },
    checkDone: function(index) {
      console.log(index);
      this.todoList[index].isDone = !this.todoList[index].isDone;
      this.sevaData();
    },
    del(id) {
      this.todoList.splice(id, 1);
      this.todoList.forEach((item, i) => {
        item.id = i;
      });
      this.sevaData();
    },
  },
  computed: {
    //过滤todoList的数据，得到为做好的和已做好的列表
    doingList: function() {
      //没做好的
      let arr = this.todoList.filter(function(item, index) {
        return !item.isDone;
      });
      return arr;
    },
    doneList: function() {
      //做好的
      let arr = this.todoList.filter(function(item, index) {
        return item.isDone;
      });
      return arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.todoItem {
  display: flex;
  .del {
    width: 55px;
    height: 25px;
    background-color: red;
  }
}
</style>