VueFire Todo App Demo

by fxi

HTML

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuefire"></script>

<div id="app">
  <input v-model.trim="newLogText" @keyup.enter="addLog" placeholder="Add new log">
  <ul>
    <li v-for="log in logs">
      <input :value="log.date" @input="updateLogApt(log, $event.target.value)">
      <button @click="removeLog(log)">X</button>
    </li>
  </ul>
</div>

JavaScript

// Initialize Firebase
var config = {
  apiKey: "AIzaSyBwu9YcckZd50cbSxL3jkLpevhPvVlNOKA",
  authDomain: "waterbragger.firebaseapp.com",
  databaseURL: "https://waterbragger.firebaseio.com",
  projectId: "waterbragger",
  storageBucket: "waterbragger.appspot.com",
  messagingSenderId: "979456620574"
};

var db = firebase.initializeApp(config).database();
var logsRef = db.ref();

new Vue({
  el: '#app',
  data: {
    newLogText: ''
  },
  firebase: {
    logs: {
      source: logsRef.limitToLast(25),
      asObject: false,
      readyCallback: function(d) {
        
      }
    }
  },
  methods: {
    addLog: function() {
      if (this.newLogText) {
        logsRef.push({
          text: this.newLogText
        })
        this.newLogText = ''
      }
    },
    updateLogText: function(log, newText) {
      logsRef.child(log['.key']).child('apt').set(newText)
    },
    removeLog: function(log) {
      logsRef.child(log['.key']).remove()
    }
  }
})