| 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> | |
| 9 | </md-list> | |
| 10 | </template> | |
| 11 | ||
| 12 | ||
| 13 | <script> | |
| 14 | import TodoItem from "@/components/TodoItem.vue"; | |
| 15 | import EventBus from "@/services/EventBus" | |
| 16 | export default { | |
| 17 | name: "ListOfTodos", | |
| 18 | props: { | |
| 19 | ||
| 20 | }, | |
| 21 | components: { | |
| 22 | TodoItem | |
| 23 | }, | |
| 24 | data () { | |
| 25 | return { | |
| 26 | todos: [{ | |
| 875958 | 27 | title: 'Have a poop', |
| a34f1d | 28 | id: '123', |
| D | 29 | complete: false |
| 30 | },{ | |
| 875958 | 31 | title: 'Learn Vue JS', |
| a34f1d | 32 | id: '132', |
| D | 33 | complete: false |
| 34 | },{ | |
| 875958 | 35 | title: 'Love DevOps', |
| a34f1d | 36 | id: '321', |
| D | 37 | complete: false |
| 38 | }] | |
| 39 | } | |
| 40 | }, | |
| 41 | created () { | |
| 42 | const self = this | |
| 43 | EventBus.$on('NEWTODOADDED', function (todo) { | |
| 44 | console.info('INFO - NEWTODOADDED received ', todo) | |
| 45 | self.todos.push(todo); | |
| 46 | }); | |
| 47 | }, | |
| 48 | methods: { | |
| 49 | updateTodoList(todo) { | |
| 50 | this.todos.push(todo); | |
| 51 | } | |
| 52 | } | |
| 53 | }; | |
| 54 | </script> | |
| 55 | ||
| 56 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 57 | <style scoped lang="scss"> | |
| 58 | ||
| 59 | </style> | |
