5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsでFirebaseを始めよう 4.送信してみる編

Last updated at Posted at 2017-10-30

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

なんでもいいから、とりあえずサーバーに送信してみよう。バックエンドに何も実装してないのに送信したらちゃんと保存してくれる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.リストを表示させる編

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?