| commit | author | age | ||
| a34f1d | 1 | <template> |
| 08cb74 | 2 | <div> |
| A | 3 | <md-list> |
| 4 | <!-- TODO - change to an actual KEY when i connect to the DB --> | |
| 5 | <div v-for="item in todos" :key="item.id" > | |
| 6 | <TodoItem | |
| 7 | :todoItem=item | |
| 8 | ></TodoItem> | |
| 9 | </div> | |
| 10 | </md-list> | |
| 11 | </div> | |
| a34f1d | 12 | </template> |
| D | 13 | |
| 14 | ||
| 15 | <script> | |
| 16 | import TodoItem from "@/components/TodoItem.vue"; | |
| 08cb74 | 17 | import { mapGetters } from "vuex"; |
| A | 18 | |
| a34f1d | 19 | export default { |
| D | 20 | name: "ListOfTodos", |
| 3f23cc | 21 | props: {}, |
| a34f1d | 22 | components: { |
| b03f98 | 23 | TodoItem |
| a34f1d | 24 | }, |
| 3f23cc | 25 | computed: { |
| 08cb74 | 26 | ...mapGetters(["todos"]) |
| a34f1d | 27 | }, |
| 3f23cc | 28 | created() { |
| e38844 | 29 | this.$store.dispatch("loadTodos"); |
| b03f98 | 30 | } |
| a34f1d | 31 | }; |
| D | 32 | </script> |
| 33 | ||
| 34 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 35 | <style scoped lang="scss"> | |
| 36 | </style> | |
