我试图在vue.js中做一个todo应用程序，当我试图删除元素时，它总是从数组中删除第一个元素，不知道为什么。我试图删除元素使用过滤器，但然后什么也没有发生，什么也没有被删除。

<template>
  <div class="maindiv">
    <p>Todo list</p>
    <input type="text" v-model="taskinput" /> <br />
    <input type="button" value="Add" @click="addTodo" /> <br /> <br />
    <h1 v-if="!taskValid" >
      Task cannot be empty
    </h1>
    <input type="button" v-bind:value="hideTasks ? 'Hide' : 'Show' " class="hidebtn" @click="changeStatus" /> <br />
    <div v-show="hideTasks">
      <li v-for="todo in todolist" v-bind:key="todo.id" >
        <ul :class="todo.done ? 'done' : 'notdone'">
          <input type="checkbox" v-model="todo.done" />
          {{ todo.task }}
          <button @click="deleteTodo(key)">Delete</button>
        </ul>
      </li>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function () {
    return {
      todolist: [{task: 'do something', done: false}],
      taskinput: '',
      hideTasks: true,
      taskValid: true,
    }
  },
  methods: {
    addTodo: function () {
      if (this.taskinput.length !== 0) {
        this.todolist.push({ task: this.taskinput, done: false });
        this.taskinput = '';
        this.taskValid = true;
      }
      else {
        this.taskValid = false;
      }
    },
    deleteTodo: function(index) {
      this.todolist.splice(index, 1);
      console.log(this.todolist);
    },
    changeStatus: function () {
      this.hideTasks = !this.hideTasks;
    }
  }
}
</script>