Simplified

Cut example down to the bare essentials, just saves and deletes a simple list with timestamps

Simplified
Cut example down to the bare essentials, just saves and deletes a simple list with timestamps
b3574110 · Adam Procter · d03e10d7 · d03e10d7 · b3574110 · b3574110
Commit b3574110 authored Mar 28, 2018 by Adam Procter
Hide whitespace changes
Inline Side-by-side

Showing with 17 additions and 23 deletions

basic_cloudfire.png basic_cloudfire.png +0 -0

index.html index.html +3 -5

js/main.js js/main.js +14 -18

No files found.
--- a/basic_cloudfire.png
+++ b/basic_cloudfire.png
--- a/index.html
+++ b/index.html
@@ -10,21 +10,19 @@
 		<link rel='stylesheet' href='css/main.css'>
 		<link rel='stylesheet' href='css/normalize.min.css'>
 		
-	<!-- VUE -->	
-	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- VUE -->	
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
 <!-- Firebase -->
 <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script> 
 <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script> 
 <!-- VueFire -->
- <script src="https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vuefire/2.0.0-alpha.7/vuefire.js"></script>

    </head>
    <body>
        <!-- Add your site or application content here -->
     <div id="app">
 <p>{{message}}</p>	   
-<button @click="toggleTodos">Toggle todos</button>
-

      <input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
 	 	

--- a/js/main.js
+++ b/js/main.js
@@ -3,15 +3,20 @@ var fireApp = firebase.initializeApp({
 	      databaseURL: 'https://yourlink.com'
 	    })
    
-//firebase.firestore().enablePersistence() //offline on ? perhaps
+
+Vue.use(Vuefire.default);
+
+//firebase.firestore().enablePersistence() //support offline on ? perhaps

 const db = firebase.firestore()
 const todos = db.collection('todos')
-const unFinishedTodos = todos.where('finished', '==', false)
-const finishedTodos = todos.where('finished', '==', true)        
+var documents = todos
+
+//const unFinishedTodos = todos.where('finished', '==', false)  // useful for later thinking
+     

 new Vue({
-       el: '#app',
+	   el: '#app',
       data: {
 		 message: 'Vue + Vuefire & Cloud Firestore',
         todos: [],
@@ -19,14 +24,13 @@ new Vue({
       },
 	   
       firestore: {
-         todos: unFinishedTodos
+         todos: documents

       },
       methods: {
         addTodo: function () {
           if (this.newTodoText) {
             todos.add({
-               finished: false,
               text: this.newTodoText,
               created: firebase.firestore.FieldValue.serverTimestamp()
             })
@@ -40,17 +44,9 @@ new Vue({
 		 
         removeTodo: function (todo) {
           todos.doc(todo.id).delete()
-         },
-		 
-         toggleTodos () {
-           console.log(this.$firestoreRefs.todos === unFinishedTodos)
-           
-		   this.$bind(
-             'todos',
-             this.$firestoreRefs.todos === unFinishedTodos
-               ? finishedTodos
-               : unFinishedTodos
-           )
         }
+		
       }
-     })
+})
+     
+