Vue.jsでFirebaseを始めよう 6.入力＆送信編

入力したものを送信する部分を作る

入力用のdataを用意する

nameとmessageを追加する

data () {
  return {
    list: [],     // 最新状態はここにコピーされる
    name: '',     // 名前
    message: '',  // 送信メッセージ
  }
}

入力部分のhtml

dataに追加したnameとmessageをinputの v-model に入れて紐付ける

<!-- 名前の入力欄 -->
<label for="nameInput">名前</label>
<input type="txt" id="nameInput" v-model="name">

<!-- メッセージの入力欄 -->
<label for="nameInput">メッセージ</label>
<input type="txt" id="nameInput" v-model="message">

Vue Devtoolsで入力データがdataに反映されてることを確認しよう。

送信ボタン

イベントハンドラーに sendMessage を入れる

<!-- 送信ボタン -->
<button type="button" class="btn btn-default" @click="sendMessage">
  送信
</button>

sendMessageの実装

firebaseに送信する部分を実装する。methodsに以下の関数を追加しよう。

sendMessage () {
  // 空欄の場合は実行しない
  if (!this.name || !this.message) return
  // 送信
  firebase.database().ref('myBoard/').push({
    name: this.name,
    message: this.message
  })
  // 送信後inputを空にする
  this.name = ''
  this.message = ''
}

名前とメッセージを入力して、送信ボタンを押してみよう。リストに新しいデータが追加されるはず。ブラウザをリロードして、データがちゃんと残ってることを確認しよう。firebaseを使えば、簡単に永続化できるんだ！