tl;dr

Firebase RealtimeDatabaseを触ってみた
データの挿入と削除をやってみた

準備

ディレクトリの構成
Todo.vueのソース
router/index.jsのソース

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Todo.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

yoshitaku$ tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

Todo.vueのソースコード

<template>
    <div class="todo">
        <h1>タスクの一覧</h1>
        <div>
            <input type="text" v-model="newTodoName">
            <button type="submit" v-on:click="createTodo()">タスクの作成</button>
        </div>
        <ul v-for="(todo, key) in todos" :key="todo.id" >
            <li>
              <input class="toggle" type="checkbox" v-model="todo.isComplete">{{ todo.name }}
              <button type="submit" v-on:click="deleteTodo(key)">タスクの削除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Todo',
  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },
  data () {
    return {
      database: null,
      todoRef: null,
      newTodoName: '',
      showTodoType: 'all',
      todos: []
    }
  },
  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }
}

</script>

<style scoped>
ul {
  list-style: none;
}
</style>

Firebase RealtimeDatabaseとの接続

個別に見ていきます。createdでインスタンスを作成したときに、データベースへ接続し保存されているデータを取得してきます。 this.todoRef = this.database.ref('todos')にFirebase Consoleで定義した名前を設定します。（Firebase RealtimeDatabaseの設定の項で再度説明）

  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },

Todoの作成と削除

methodsにcreateTodoとdeleteTodoを設定しています。 createTodoは画面上のテキストボックスnewTodoNameに入力された値を引数に、todoRefにpushしています。終わったら、テキストボックスnewTodoNameを空欄でクリアしています。deleteTodoはkeyを引数にremoveしています。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

router/index.jsのソース

これは、Todo.vueとURLを紐づけています

import Vue from 'vue'
import Router from 'vue-router'
import Todo from '@/components/Todo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
})