Firebase, Vue.js 2 and Vuefire: To-Do List

firebase-todo-list.html

<!--
Firebase, Vue.js 2 and Vuefire: ToDo List
https://developers.pipedrive.com/docs/api/v1/#!/Persons/get_persons
-->

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

<div id="demo">
  <ol>
    <li v-for="task in tasks" class="task" :key="task['.key']">
      <span>{{ task.text }}</span>
      <button v-on:click="removeTask(task)">X</button>
    </li>
  </ol>
  <form id="add" v-on:submit.prevent="addTask">
    <input type="text" name="addTask" v-model="newTask.text">
    <input type="submit" value="Add task">
  </form>
  <ul class="errors">
    <li v-show="!validation.text">Task cannot be empty.</li>
  </ul>
</div>

<script>

// Replace abc with your Firebase domain (ex. vuejs-c86csa4)

var config = {
  authDomain: "abc.firebaseapp.com",
  databaseURL: "https://abc.firebaseio.com/"
}
firebase.initializeApp(config)

var tasksRef = firebase.database().ref('tasks')

var app = new Vue({
  el: '#demo',
  data: {
    newTask: {
      text: ''
    }
  },
  firebase: {
    tasks: tasksRef
  },
  computed: {
    validation: function () {
      return {
        text: !!this.newTask.text.trim()
      }
    },
    isValid: function () {
      var validation = this.validation
      return Object.keys(validation).every(function (key) {
        return validation[key]
      })
    }
  },

  methods: {
    addTask: function () {
      if (this.isValid) {
        tasksRef.push(this.newTask)
        this.newTask.text = ''
      }
    },
    removeTask: function (task) {
      tasksRef.child(task['.key']).remove()
    }
  }
})
</script>