Skip to content

Instantly share code, notes, and snippets.

@nhumphrey2 nhumphrey2/todolist.vue Secret
Created Dec 18, 2018

Embed
What would you like to do?
To do list Vue Simple App
<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
You can’t perform that action at this time.