Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 60x 60x 60x 75x 60x 60x 60x 30x | <template>
<section>
<h1 class="header">My Todo App!</h1>
<input type="text" placeholder="Enter Todo" v-model="todoText" class="inputTodo" data-at="new-todo" @keydown.enter="addTodo">
<ul v-if="todos.length">
<TodoListItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@remove="removeTodo"
>
</TodoListItem>
</ul>
<p v-else data-at="noTodo">
No Anything Todo
</p>
</section>
</template>
<script>
import TodoListItem from './TodoListItem.vue'
let initialTodoId = 1
export default {
name: 'Todo',
components: {
TodoListItem
},
data () {
return {
todos: [],
todoText: ''
}
},
methods: {
addTodo() {
const trimTodoText = this.todoText.trim()
const exist = this.todos.findIndex(item => item.text === trimTodoText)
E if (trimTodoText && exist === -1) {
this.todos.push({
id: initialTodoId++,
text: trimTodoText
})
this.todoText = ''
}
},
removeTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
}
}
}
</script>
<style>
.header {
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.inputTodo {
width: 50%;
box-sizing: border-box;
padding: 12px 20px;
font-size: 32px;
}
</style>
|