Vue.js + Firebaseで観光地の口コミサイトを作る -2-

今回は、データベースの設計を実装していく。

データベースの設計
- realtime database
- 口コミを保存する機能を実装していく

データベースの設計

realtime database

realtime databaseはデータとアプリケーションをリアルタイムで同期する事ができる
今回は、口コミ(テキストメッセージ)を保存する
f:id:TakaShinoda:20190809195914p:plain

口コミを保存する機能を実装していく

Desktop/miyazaki-tours/src/components/Aoshima.vue

<script>
import firebase from 'firebase';
export default {
  name: 'Aoshima',
  data () {
    return {
      database: null,
      aoshimaOpinionsRef: null,
      newTodoName: '',
      aoshimaOpinions: [],
    }
  },

  //データベースから値の取得
  created: function() {
    this.database = firebase.database();
  //refにパスを指定して値を取得
    this.aoshimaOpinionsRef = this.database.ref('aoshimaOpinions');
    var _this = this;
  //データに変化が起きたときに再取得する
    this.aoshimaOpinionsRef.on('value', function(snapshot) {
      _this.aoshimaOpinions = snapshot.val(); 
    });
  },
  methods: {
    //DBのaoshimaOpinions/以下にデータを格納
    postOpinion: function() {
      if (this.newTodoName == "") { 
        return;
      }
      this.aoshimaOpinionsRef.push({
        name: this.newTodoName,
      });
      this.newTodoName = "";
    },
  },
}
</script>