データをサーバーに送信してみよう

なんでもいいから、とりあえずサーバーに送信してみよう。バックエンドに何も実装してないのに送信したらちゃんと保存してくれるfirebaseのいい加減さを体験してみよう。

まずtemplateに送信ボタンを追加する。

<button type="button" class="btn btn-default" @click="pushData">
  送信
</button>

関数pushDataの実装。データベースのインスタンスも忘れずに。

export default {
  ...
  methods: {
    ...
    pushData () {
      firebase.database().ref('myBoard/').push({
        name: 'test',
        message: 'foo'
      })
    }
  }
}

ブラウザの画面に「送信」ボタンが出てるから、勇気を出して押してみよう……なにも起こらない。データベースを表示する部分がまだ実装していないからだ。firebaseのconsole画面へ行って確認してみよう。

fire-vue_–_Database_–_Firebase_console.png

おぉ〜、サーバー側にしっかりと送信できたではないか？！これでfirebaseへ第一歩を踏み出した！

Vue.jsでFirebaseを始めよう 5.リストを表示させる編