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

46 lines
886 B
Vue
Raw Normal View History

2016-12-25 20:16:30 +00:00
<template>
<div>
<h2>Todos</h2>
<ul>
2017-11-26 13:40:57 +00:00
<li v-for="(todo, index) in todos" :key="index">
<input :checked="todo.done" type="checkbox" @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>
<NuxtLink to="/">
Home
</NuxtLink>
2016-12-25 20:16:30 +00:00
</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: {
2017-10-31 13:43:55 +00:00
addTodo(e) {
2018-08-10 19:46:53 +00:00
const text = e.target.value
2016-12-25 20:16:30 +00:00
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>