Vue.js로 Firebase를 시작하겠습니다.입력 & 발송편

입력한 걸 보내는 부분을 만드는 거예요.

입력용 데이터 준비

이름 및 메시지 추가

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

입력 부분의 html

데이터에 추가된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에서 입력 데이터가 데이터에 반영되는지 확인합니다.

보내기 버튼

이벤트 프로세서에 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를 사용하면 간단하게 오래 지속될 수 있습니다!