<template>
<div id="app">
<Todos :todos="todos" @handleDelete="handleDelete"/>
</div>
</template>
<script>
import Todos from ‘./components/Todos‘
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},
]
}
},
components:{
Todos:Todos
},
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>