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>
posted @ 2019-11-01 13:20  武卡卡  阅读(873)  评论(0编辑  收藏  举报