commit | author | age
|
26aabc
|
1 |
<template> |
A |
2 |
<div> |
|
3 |
<div class="xofyDone"> |
d963a4
|
4 |
<span> {{sumDoneTodoItems(todos)}} out of {{this.todos.length}} done. </span> |
637b4a
|
5 |
<md-button class="md-raised" v-on:click="clearDoneTodos()">Clear Done</md-button> |
A |
6 |
<md-button class="md-raised" v-on:click="clearTodos()">Clear all</md-button> |
26aabc
|
7 |
</div> |
A |
8 |
</div> |
|
9 |
</template> |
|
10 |
|
|
11 |
<script> |
|
12 |
import { mapGetters } from "vuex"; |
|
13 |
|
|
14 |
export default { |
|
15 |
name: "XofYItems", |
|
16 |
computed: { |
|
17 |
...mapGetters(["todos"]) |
|
18 |
}, |
|
19 |
created() { |
|
20 |
this.$store.dispatch("loadTodos"); |
|
21 |
}, |
|
22 |
methods: { |
|
23 |
clearDoneTodos() { |
|
24 |
this.$store.dispatch("clearTodos"); |
|
25 |
}, |
|
26 |
clearTodos() { |
|
27 |
// NOTE - true = all todos |
|
28 |
this.$store.dispatch("clearTodos", true); |
|
29 |
}, |
|
30 |
sumDoneTodoItems(todos) { |
|
31 |
return todos.reduce( |
|
32 |
(result, tdItem) => (tdItem.completed ? result + 1 : result), |
|
33 |
0 |
|
34 |
); |
|
35 |
} |
|
36 |
} |
|
37 |
}; |
|
38 |
</script> |
|
39 |
|
|
40 |
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
41 |
<style scoped lang="scss"> |
|
42 |
.xofyDone { |
d963a4
|
43 |
height: 52px; |
A |
44 |
line-height: 52px; |
26aabc
|
45 |
display: inline-block; |
A |
46 |
} |
|
47 |
</style> |