vue - @click 传参删除

<template>

  <div id="app">

     <div v-for="todo in  todos" :key="todo.id">

        <div>{{todo}}   <button @click="handleDelete(todo.id)">删除</button></div>

     </div>

  </div>

</template>

<script>

export default {

  name:'app',

  data(){

    return{

      todos:[

        {id:1,title:"待办事项1",completed:false},

        {id:2,title:"待办事项2",completed:false},

        {id:3,title:"待办事项3",completed:false},

      ]

    }

  },

  methods:{

    handleDelete(id){

      console.log('id :'+id);

      this.todos = this.todos.filter(todo => todo.id != id);

    }

  }

}

</script>

<style>

*{margin: 0;padding: 0;box-sizing: border-box}

</style>