| commit | author | age | ||
| a34f1d | 1 | <template> |
| D | 2 | <md-list> |
| 3 | <!-- TODO - change to an actual KEY when i connect to the DB --> | |
| 4 | <div v-for="item in todos" :key="item.id" > | |
| 5 | <TodoItem | |
| 6 | :todoItem=item | |
| 7 | ></TodoItem> | |
| 8 | </div> | |
| 0f0a91 | 9 | <XofYitems /> |
| fbee7b | 10 | <div class="xofyDone"> |
| A | 11 | <span>{{sumDoneTodoItems(todos)}} out of {{this.todos.length}} done</span> |
| 12 | <button v-on:click="clearTodos()">CLEAR DONE</button> | |
| 13 | </div> | |
| a34f1d | 14 | </md-list> |
| D | 15 | </template> |
| 16 | ||
| 17 | ||
| 18 | <script> | |
| 19 | import TodoItem from "@/components/TodoItem.vue"; | |
| 8acdfc | 20 | import XofYitems from "@/components/XofYitems.vue"; |
| 3f23cc | 21 | import EventBus from "@/services/EventBus"; |
| A | 22 | import { mapGetters } from 'vuex'; |
| a34f1d | 23 | export default { |
| D | 24 | name: "ListOfTodos", |
| 3f23cc | 25 | props: {}, |
| a34f1d | 26 | components: { |
| 0f0a91 | 27 | TodoItem, |
| A | 28 | XofYitems |
| a34f1d | 29 | }, |
| 3f23cc | 30 | computed: { |
| A | 31 | ...mapGetters( |
| 32 | ["todos"] | |
| 33 | ) | |
| a34f1d | 34 | }, |
| 3f23cc | 35 | // data () { |
| A | 36 | // return { |
| 37 | // todos: [{ | |
| 38 | // title: 'Have a poop', | |
| 39 | // id: '123', | |
| 40 | // complete: true | |
| 41 | // },{ | |
| 42 | // title: 'Learn Vue JS', | |
| 43 | // id: '132', | |
| 44 | // complete: true | |
| 45 | // },{ | |
| 46 | // title: 'Love DevOps', | |
| 47 | // id: '321', | |
| 48 | // complete: false | |
| 49 | // }] | |
| 50 | // } | |
| 51 | // }, | |
| 52 | created() { | |
| 53 | const self = this; | |
| 54 | // EventBus.$on("NEWTODOADDED", function(todo) { | |
| 55 | // console.info("INFO - NEWTODOADDED received ", todo); | |
| 56 | // self.todos.push(todo); | |
| 57 | // }); | |
| a34f1d | 58 | }, |
| D | 59 | methods: { |
| 0f0a91 | 60 | // updateTodoList(todo) { |
| A | 61 | // this.todos.push(todo); |
| 62 | // }, | |
| 63 | sumDoneTodoItems(todos) { | |
| 64 | return todos.reduce((result, tdItem) => tdItem.complete ? result + 1 : result, 0); | |
| fbee7b | 65 | }, |
| A | 66 | clearTodos() { |
| 67 | this.$store.dispatch('clearAllTodos'); | |
| a34f1d | 68 | } |
| fbee7b | 69 | |
| a34f1d | 70 | } |
| D | 71 | }; |
| 72 | </script> | |
| 73 | ||
| 74 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 75 | <style scoped lang="scss"> | |
| 76 | ||
| fbee7b | 77 | .xofyDone{ |
| A | 78 | display: inline-block; |
| 79 | ||
| 80 | } | |
| a34f1d | 81 | </style> |
