42 lines
707 B
Vue
42 lines
707 B
Vue
<template>
|
|
<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
|
|
<p>
|
|
<input type="checkbox" v-on:change="markComplete">
|
|
{{todo.title}}
|
|
<button @click="$emit('del-todo', todo.id)" class="del">X</button>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TodoItem",
|
|
props: ["todo"],
|
|
methods: {
|
|
markComplete() {
|
|
this.todo.completed = ! this.todo.completed
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.todo-item {
|
|
background: #f4f4f4;
|
|
padding: 10px;
|
|
border-bottom: 1px #ccc dotted;
|
|
}
|
|
.is-complete {
|
|
text-decoration: line-through;
|
|
}
|
|
.del {
|
|
background: #e22;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 5px 9px;
|
|
border-radius: 50%;
|
|
float: right;
|
|
}
|
|
</style> |