vue实现todo

需求如上图

本人是前端新人，刚看完一遍基础vue2，于是找了一个以前js做过的小demo打算用vue复现一次。做的时候刚好踩了一些vue的坑，打算分享出来。
因为是一个小demo，且主要重点是放在实现的功能上，所以样式可能不是很好看，主要是把要求的功能实现出来。
首先是布局`

<template>
  <div>
    <div class="header">
      <el-input placeholder="请输入任务" v-model="input" clearable> </el-input>
      <el-button type="info" @click="add">添加</el-button>
    </div>
    <div class="table1">
      <ul>
        <li @click="isok(item.id)" v-for="item in tableData" :key="item.id">
          <i ref="trefs" class="el-icon-check"></i>

          {{ item.shijian }}

          <i class="el-icon-circle-close" @click.stop="deletedata(item.id)"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

样式

<style lang="less" scoped>
.header {
  width: 1000px;
  height: 150px;
  background-color: red;
  margin: 50px auto;
  margin-bottom: 0;
}
.el-input {
  width: 500px;
  margin: 100px 0;
  margin-left: 250px;
}
.table1 {
  margin: 0 auto;
  width: 1000px !important;
}
.el-table {
  margin-top: 0 !important;
}
li {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
  line-height: 50px;
  background-color: whitesmoke;
  position: relative;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-icon-circle-close {
  position: absolute;
  right: 0;
  top: 18px;
}
.el-icon-check {
  visibility: hidden;
}
</style>

然后是功能模块
第一个功能是添加代办事项。这个很好实现，只需要用v-model绑定input表单元素，把每个表单元素在click事件触发的时候push进代办事项数组就行了。注意的的是在push表单元素的时候，一定要给每个元素在绑定一个独一无二的id值，具体原因下面再说。
代码：

export default {
  data() {
    return {
      id: 0,
      input: '',
      tableData: [],
    }
  },

  methods: {
    add() {
      ++this.id
      this.tableData.push({ 'shijian': this.input ,  'id': this.id })
    },
    

这样我们就实现的添加事件的操作。
现在我们谈谈为什么在把表单元素push进数组的时候，需要在绑定一个id值。这是因为我们在用v-for把数组遍历在li标签上的时候，需要给它提供一个独一无二的key值，且最好不要用索引当key值，具体原因下面再说。

现在我们来实现点击代办事件后，事件完成功能。
我的思路是使用visibility来显示和隐藏一个对勾图案来表示事件是否完成。这里就涉及到了操作dom，所以开始我想给每一个li绑定一个独一无二的ref，但后来我在网上看到可以给每一个li绑定一个同样的ref，然后这样用this.$refs得到的就是一个数组，可以用数组[索引]的方式得到想要的元素，于是我采用了这样的方案。

 isok(id) {
      this.$nextTick(() => {
       var i=this.tableData.findIndex(value=> value.id==id)
       console.log(i)
        if (this.$refs.trefs[i].style.visibility == 'hidden') {
          this.$refs.trefs[i].style.visibility = 'visible'
        } else {
          this.$refs.trefs[i].style.visibility = 'hidden'
        }
        console.log(this.tableData)
      })
    },

本来我是直接把索引号传到函数去，但后来在我做了删除功能后，我发现了一个bug，就是当我删除了一个数组元素后，某些事件代办状态发生了改变。经过检查后发现，原来是删除某个元素后，每个元素的索引值发生了改变，都顺移了一位，这就导致了，我之前通过数组索引查出的数组元素改变了，所以状态也有所改变。这里也解释了为什么不能用索引当key值，因为每个数组元素的索引值是可能改变的，每个索引值并不对应唯一的数组元素。于是我开始传入id值，并且通过findIndex（）函数找到这时候元素的索引值，在通过this.$refs修改visibility状态。

删除功能：
删除功能也是很好完成的，一样的用过id找到对应的索引值，然后通过splice函数删除即可。这里我有一个注意点就是，我是把删除功能的点击事件绑定在li标签下面的叉叉图案上，又把事件完成功能绑定在li上面，所以在绑定删除事件的时候还需要给他加stop阻止冒泡，不然每次点击叉叉的时候，它既会触发删除，又会触发点击完成，因为是先删除，所以没有事件给他完成，程序就会报错。

这里这个demo的功能就算是完成了，如果你有更好的实现方式，欢迎评论区讨论。

    deletedata(id) {
     
        var i= this.tableData.findIndex(value=> value.id==id)
      this.tableData.splice(i, 1)
     
    }

这是最终成果图