Firebaseからtimestampのカラムをbetween条件でクエリしてデータを表示する方法 on Vue.js

javascript - Query Firebase Database with two between conditions - Stack Overflow

前提

• Firebaseはcloudfirestoreを使っています

• インストールパッケージ抜粋

  "dependencies": {
    "firebase": "^5.2.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "view-router": "^0.2.3",
    "vue": "^2.5.2",
    "vue-firestore": "^0.2.9",
    "vue-router": "^3.0.1",
    "vuefire": "^2.0.0-alpha.12",
    "vuex": "^3.0.1"
  },

createdAt(timestamp)が、6/1から6/30までのデータが欲しいよ！

playsのドキュメントの中には、音楽データのレファレンスが入っているので、途中でそのレファレンスから音楽データも取得しています

<script>
    import playitem from './PlayItem';
    import db from '../../firebase/firebase';

    export default {
        components: {
            playitem
        },
        data() {
            return {
                plays: []
            };
        },
        created() {
            var startDate = new Date('June 1, 2018');
            var endDate = new Date('June 30, 2018');

            let items = [];
            db.collection('plays').orderBy('createdAt', 'asc').startAt(startDate).endAt(endDate).get().then((querySnapshot) => {
                querySnapshot.forEach(async(doc) => {
                const music = await doc.data().musicRef.get();

                let data = {
                    'id': doc.id,
                    'userId': doc.data().userId,
                    'postId': doc.data().postId,
                    'title': music.data().title,
                    'artist': music.data().artist,
                    'createdAt': doc.data().createdAt
                };

                this.plays.push(data);
                });
            });

        }

• テンプレート側抜粋

            <playitem
            v-for="play in plays" :key="play.id" :play="play">
            </playitem>

• firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

firebase.initializeApp({
    databaseURL: 'https://xxxxxxxxxxxx.firebaseio.com',
    projectId: 'xxxxxxx'
});

const db = firebase.firestore();

const settings = { /* your settings... */
    timestampsInSnapshots: true
};
db.settings(settings);

export default db;