commit | author | age
|
991c76
|
1 |
<template> |
D |
2 |
<div class="home"> |
|
3 |
<img src="../assets/logo.png"> |
a34f1d
|
4 |
<NewTodo placeholderMsg="Add a new todo" @NEWTODOADDED="newTodoAdded"/> |
D |
5 |
<TodoItem todoItem="Have a beers"/> |
|
6 |
<ListOfTodos todos="this.todos"/> |
82de6c
|
7 |
|
D |
8 |
<button @click=newTodoAdded>add todo</button> |
|
9 |
<button>getTodos</button> |
|
10 |
<code>{{ allTodos }}</code> |
991c76
|
11 |
</div> |
82de6c
|
12 |
|
991c76
|
13 |
</template> |
D |
14 |
|
|
15 |
<script> |
|
16 |
// @ is an alias to /src |
|
17 |
import HelloWorld from "@/components/HelloWorld.vue"; |
|
18 |
import NewTodo from "@/components/NewTodo.vue"; |
a34f1d
|
19 |
import TodoItem from "@/components/TodoItem.vue"; |
D |
20 |
import ListOfTodos from "@/components/ListOfTodos.vue"; |
|
21 |
|
|
22 |
import EventBus from "@/services/EventBus"; |
|
23 |
|
991c76
|
24 |
export default { |
D |
25 |
name: "Catalog", |
|
26 |
components: { |
a34f1d
|
27 |
NewTodo, |
D |
28 |
TodoItem, |
|
29 |
ListOfTodos |
|
30 |
}, |
82de6c
|
31 |
// load todos on start |
D |
32 |
created () { |
|
33 |
this.$store.dispatch('loadTodos') |
|
34 |
}, |
|
35 |
// be able to get the data |
|
36 |
computed: { |
|
37 |
allTodos () { |
|
38 |
return this.$store.getters.todos |
|
39 |
}, |
|
40 |
}, |
a34f1d
|
41 |
methods: { |
530b0a
|
42 |
newTodoAdded (e) { |
D |
43 |
this.$store.dispatch('setNewTodo','some random strings or whatever') |
|
44 |
this.$store.dispatch('addTodo') |
|
45 |
this.$store.dispatch('clearNewTodo') |
|
46 |
}, |
991c76
|
47 |
} |
D |
48 |
}; |
|
49 |
</script> |