search
LoginSignup
15
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

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;

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
What you can do with signing up
15
Help us understand the problem. What are the problem?