-
-
Save nhumphrey2/65afc2c23655748b70851794f129312c to your computer and use it in GitHub Desktop.
To do list Vue Simple App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<BaseInputText | |
v-model="newTodoText" | |
placeholder="New todo" | |
@keydown.enter="addTodo" | |
/> | |
<ul v-if="todos.length"> | |
<TodoListItem | |
v-for="todo in todos" | |
:key="todo.id" | |
:todo="todo" | |
@remove="removeTodo" | |
/> | |
</ul> | |
<p v-else> | |
Nothing left in the list. Add a new todo in the input above. | |
</p> | |
</div> | |
</template> | |
<script> | |
import BaseInputText from './BaseInputText.vue' | |
import TodoListItem from './TodoListItem.vue' | |
let nextTodoId = 1 | |
export default { | |
components: { | |
BaseInputText, TodoListItem | |
}, | |
data () { | |
return { | |
newTodoText: '', | |
todos: [ | |
{ | |
id: nextTodoId++, | |
text: 'Learn Vue' | |
}, | |
{ | |
id: nextTodoId++, | |
text: 'Learn about single-file components' | |
}, | |
{ | |
id: nextTodoId++, | |
text: 'Fall in love' | |
} | |
] | |
} | |
}, | |
methods: { | |
addTodo () { | |
const trimmedText = this.newTodoText.trim() | |
if (trimmedText) { | |
this.todos.push({ | |
id: nextTodoId++, | |
text: trimmedText | |
}) | |
this.newTodoText = '' | |
} | |
}, | |
removeTodo (idToRemove) { | |
this.todos = this.todos.filter(todo => { | |
return todo.id !== idToRemove | |
}) | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment