Commit b3574110 authored by Adam Procter's avatar Adam Procter

Simplified

Cut example down to the bare essentials, just saves and deletes a simple list with timestamps
parent d03e10d7
basic_cloudfire.png

170 KB | W: | H:

basic_cloudfire.png

119 KB | W: | H:

basic_cloudfire.png
basic_cloudfire.png
basic_cloudfire.png
basic_cloudfire.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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">
......
......@@ -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
)
}
}
})
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment