|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 |
| - <head> |
4 |
| - <meta charset="utf-8"> |
5 |
| - <title>VuexFire Todo App Demo</title> |
6 |
| - <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script> |
7 |
| - <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script> |
8 |
| - <script src="https://unpkg.com/vue/dist/vue.js"></script> |
9 |
| - <script src="https://unpkg.com/vuex/dist/vuex.js"></script> |
10 |
| - <script src="../../dist/vuexfire.js"></script> |
11 |
| - </head> |
12 |
| - <body> |
13 | 3 |
|
14 |
| - <!-- |
| 4 | +<head> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <title>VuexFire Todo App Demo</title> |
| 7 | + <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script> |
| 8 | + <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase-firestore.js"></script> |
| 9 | + <script src="https://unpkg.com/vue/dist/vue.js"></script> |
| 10 | + <script src="https://unpkg.com/vuex/dist/vuex.js"></script> |
| 11 | + <script src="../../dist/vuexfire.js"></script> |
| 12 | +</head> |
| 13 | + |
| 14 | +<body> |
| 15 | + |
| 16 | + <!-- |
15 | 17 | To see a live example, head to
|
16 | 18 | https://jsfiddle.net/posva/6w3ks04x/
|
17 | 19 | -->
|
18 | 20 |
|
19 |
| - <div id="app"> |
20 |
| - <ul> |
21 |
| - <li v-for="item in items" :key="item.id"> |
22 |
| - {{ item.text }} |
23 |
| - <button @click="removeTodo(item.id)">X</button> |
24 |
| - </li> |
25 |
| - </ul> |
26 |
| - <form @submit.prevent="addTodo"> |
27 |
| - <input v-model="newTodo"> |
28 |
| - <button>Add #{{ items.length }}</button> |
29 |
| - </form> |
| 21 | + <div id="app"> |
| 22 | + <ul> |
| 23 | + <li v-for="item in items" :key="item.id"> |
| 24 | + {{ item.text }} |
| 25 | + <button @click="removeTodo(item.id)">X</button> |
| 26 | + </li> |
| 27 | + </ul> |
| 28 | + <form @submit.prevent="addTodo"> |
| 29 | + <input v-model="newTodo"> |
| 30 | + <button>Add #{{ items.length }}</button> |
| 31 | + </form> |
30 | 32 |
|
31 |
| - <br/> |
32 |
| - <br/> |
| 33 | + <br/> |
| 34 | + <br/> |
33 | 35 |
|
34 |
| - <button @click="toggleSource">Toggle Source</button> |
35 |
| - </div> |
| 36 | + <button @click="toggleSource">Toggle Source</button> |
| 37 | + </div> |
36 | 38 |
|
37 |
| - <script> |
| 39 | + <script> |
38 | 40 | /* global Vue, Vuex, firebase, VuexFire */
|
39 | 41 | firebase.initializeApp({
|
40 | 42 | projectId: 'vue-fire-store',
|
41 | 43 | databaseURL: 'https://vue-fire-store.firebaseio.com'
|
42 | 44 | })
|
| 45 | + |
43 | 46 | var db = firebase.firestore()
|
| 47 | + db.settings({ timestampsInSnapshots: true }) |
44 | 48 | var itemsRef = db.collection('vuexfireItems1')
|
45 | 49 | var todosRef = db.collection('vuexfireItems2')
|
46 | 50 |
|
|
63 | 67 | window.vm = new Vue({
|
64 | 68 | el: '#app',
|
65 | 69 | store: store,
|
66 |
| - computed: Vuex.mapGetters([ 'items' ]), |
| 70 | + computed: Vuex.mapGetters(['items']), |
67 | 71 | data: {
|
68 | 72 | newTodo: '',
|
69 | 73 | },
|
70 | 74 |
|
71 | 75 | methods: {
|
72 |
| - removeTodo (id) { |
| 76 | + removeTodo(id) { |
73 | 77 | this.source.doc(id).delete()
|
74 | 78 | },
|
75 |
| - addTodo () { |
| 79 | + addTodo() { |
76 | 80 | if (this.newTodo.trim()) {
|
77 | 81 | this.source.add({
|
78 | 82 | text: this.newTodo,
|
79 | 83 | })
|
80 | 84 | this.newTodo = ''
|
81 | 85 | }
|
82 | 86 | },
|
83 |
| - toggleSource () { |
| 87 | + toggleSource() { |
84 | 88 | this.source = this.source === itemsRef
|
85 | 89 | ? todosRef
|
86 | 90 | : itemsRef
|
87 | 91 | this.$store.dispatch('setItemsRef', this.source)
|
88 | 92 | },
|
89 | 93 | },
|
90 | 94 |
|
91 |
| - created () { |
| 95 | + created() { |
92 | 96 | this.source = itemsRef
|
93 | 97 | this.$store.dispatch('setItemsRef', this.source)
|
94 | 98 | },
|
95 | 99 | })
|
96 |
| - </script> |
97 |
| - </body> |
| 100 | + </script> |
| 101 | +</body> |
| 102 | + |
98 | 103 | </html>
|
0 commit comments