| 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> | |
