mirror of https://github.com/nuxt/nuxt.git
42 lines
833 B
Vue
42 lines
833 B
Vue
<template>
|
|
<div>
|
|
<h2>Todos</h2>
|
|
<ul>
|
|
<li v-for="todo in todos">
|
|
<input type="checkbox" :checked="todo.done" @change="toggle(todo)">
|
|
<span :class="{ done: todo.done }">{{ todo.text }}</span>
|
|
</li>
|
|
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
|
|
</ul>
|
|
<nuxt-link to="/">Home</nuxt-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
computed: mapGetters({
|
|
todos: 'todos/todos'
|
|
}),
|
|
methods: {
|
|
addTodo (e) {
|
|
var text = e.target.value
|
|
if (text.trim()) {
|
|
this.$store.commit('todos/add', { text })
|
|
}
|
|
e.target.value = ''
|
|
},
|
|
...mapMutations({
|
|
toggle: 'todos/toggle'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.done {
|
|
text-decoration: line-through;
|
|
}
|
|
</style>
|