<template>
<div class="todo-item" :class="{'is-complete':todo.completed}">
<p>
<input type="checkbox" @change="markComplete">
{{todo.title}}
</p>
</div>
</template>
<script>
export default {
name:'todo',
props:["todo"],
methods:{
markComplete(){
this.todo.completed = !this.todo.completed
console.log(this.todo);
}
}
}
</script>
<style scoped>
.todo-item{
background: #f4f4f4;
padding: 10px;
border-bottom: 1px dotted #ccc ;
}
.is-complete{
text-decoration: line-through
}
.del{
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
</style>