Nuxt/examples/vuex-store-modules/pages/todos.vue

42 lines
833 B
Vue
Raw Normal View History

2016-12-25 20:16:30 +00:00
<template>
<div>
<h2>Todos</h2>
<ul>
<li v-for="todo in todos">
2017-01-09 14:10:01 +00:00
<input type="checkbox" :checked="todo.done" @change="toggle(todo)">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
2016-12-25 20:16:30 +00:00
</li>
2017-01-09 14:10:01 +00:00
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
2016-12-25 20:16:30 +00:00
</ul>
<nuxt-link to="/">Home</nuxt-link>
</div>
</template>
<script>
2017-02-12 10:48:07 +00:00
import { mapMutations, mapGetters } from 'vuex'
2016-12-25 20:16:30 +00:00
export default {
2017-02-12 10:48:07 +00:00
computed: mapGetters({
todos: 'todos/todos'
}),
2016-12-25 20:16:30 +00:00
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>
2017-01-09 14:10:01 +00:00
.done {
text-decoration: line-through;
2016-12-25 20:16:30 +00:00
}
</style>