|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <title>VueFire Todo App Demo</title> |
| 6 | + <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script> |
| 7 | + <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script> |
| 8 | + <script src="https://unpkg.com/vue"></script> |
| 9 | + <script src="../dist/vuefire.js"></script> |
| 10 | + </head> |
| 11 | + <body> |
| 12 | + |
| 13 | + <!-- |
| 14 | + Before running this example, make sure to: |
| 15 | +
|
| 16 | + 1. cd path/to/vuefire |
| 17 | + 2. npm install |
| 18 | + 3. npm run build |
| 19 | +
|
| 20 | + Then you can open this file in your browser. |
| 21 | + If you just prefer to see this example with |
| 22 | + the latest published version of VueFire, you |
| 23 | + play with the code in this fiddle: |
| 24 | +
|
| 25 | + https://jsfiddle.net/posva/wtyop5jy/ |
| 26 | + --> |
| 27 | + |
| 28 | + <div id="app"> |
| 29 | + <input |
| 30 | + v-model.trim="newTodoText" |
| 31 | + @keyup.enter="addTodo" |
| 32 | + placeholder="Add new todo" |
| 33 | + > |
| 34 | + <ul> |
| 35 | + <li v-for="todo in todos"> |
| 36 | + <input |
| 37 | + :value="todo.text" |
| 38 | + @input="updateTodoText(todo, $event.target.value)" |
| 39 | + > |
| 40 | + <button @click="removeTodo(todo)">X</button> |
| 41 | + </li> |
| 42 | + </ul> |
| 43 | + |
| 44 | + <p>config: </p> |
| 45 | + <pre> |
| 46 | + {{ config }} |
| 47 | + </pre> |
| 48 | + </div> |
| 49 | + |
| 50 | + <script> |
| 51 | + /* global Vue, firebase, Vuefire */ |
| 52 | + Vue.use(Vuefire.default) |
| 53 | + firebase.initializeApp({ |
| 54 | + projectId: 'vue-fire-store', |
| 55 | + databaseURL: 'https://vue-fire-store.firebaseio.com' |
| 56 | + }) |
| 57 | + const db = firebase.firestore() |
| 58 | + var todos = db.collection('todos') |
| 59 | + const config = db.collection('configs').doc('jORwjIykFo2NmkdzTkhU') |
| 60 | + |
| 61 | + new Vue({ |
| 62 | + el: '#app', |
| 63 | + data: { |
| 64 | + todos: [], |
| 65 | + config: null, |
| 66 | + newTodoText: '' |
| 67 | + }, |
| 68 | + firestore: { |
| 69 | + todos, |
| 70 | + config |
| 71 | + }, |
| 72 | + methods: { |
| 73 | + addTodo: function () { |
| 74 | + if (this.newTodoText) { |
| 75 | + todos.add({ |
| 76 | + text: this.newTodoText, |
| 77 | + created: firebase.firestore.FieldValue.serverTimestamp() |
| 78 | + }) |
| 79 | + this.newTodoText = '' |
| 80 | + } |
| 81 | + }, |
| 82 | + updateTodoText: function (todo, newText) { |
| 83 | + todos.doc(todo.id).update({ text: newText }) |
| 84 | + }, |
| 85 | + removeTodo: function (todo) { |
| 86 | + todos.doc(todo.id).delete() |
| 87 | + } |
| 88 | + } |
| 89 | + }) |
| 90 | + </script> |
| 91 | + </body> |
| 92 | +</html> |
0 commit comments