No data received

I believe I have everything set up properly (following the new vuefire docs site), but I’m not getting any data read into my component from Cloud Firestore.

The server compiles and runs, the page renders in the browser, there are no errors in the console, and the “No Locations are available” message is displayed based on the v-if statement checking the length of locations and finding zero. Querying individual documents either by id or with a query also returns no results.

How can I debug this to see where the problem lies? The Firestore Web SDK seems to be behaving normally when I write out to console.log from firestore.js.

Here is my component, with a query added into the newLocation element for testing purposes:

<template lang='pug'>
  div
    h3 Locations
    ul(v-if='locations.length > 0')
      li(v-for='location in locations' :key='location.id') {{location.name}}
    p(v-else) No Locations are available.
</template>
<script>

  import { db } from '@/firebase';

  export default {
    name: 'StaffingManagerLocations',
    data: function() {
      return {
        locations: [],
        newLocation: {}
      };
    },
    firebase: {
      locations: db.collection('locations'),
      newLocation: db.collection('locations').where('name', '==', 'Victoria')
    }
  }
</script>

Here is my firebase.js file (with certain strings in the config object replaced with ...):

import * as firebase from "firebase";

const config = {
  apiKey: "...",
  authDomain: "....firebaseapp.com",
  databaseURL: "https://....firebaseio.com",
  projectId: "...",
  storageBucket: "....appspot.com",
  messagingSenderId: "..."
};

// Get a Firestore instance
export const db = firebase
  .initializeApp(config)
  .firestore();

I installed vuefire@next using npm, here is the relevant section from package.json:

  "dependencies": {
    "firebase": "^5.9.2",
    "vue": "^2.6.6",
    "vue-router": "^3.0.2",
    "vuefire": "^2.0.0-alpha.21",
    "vuetify": "^1.5.5"
  },

I have installed the plugin in main.js as follows:

import Vue from 'vue';
import App from './App.vue';

import Router from './router';

import './plugins/vuetify';

import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)

Vue.config.productionTip = false;

new Vue({
  "router": Router,
  "render": h => h(App),
}).$mount('#app');

There are three locations in the database:

However, the locations array remains empty:

I know my Firestore config is correct as I can run this code in a standalone HTML page and see the three documents in the console:

  window.onload = function() {

    // Initialize Firebase
    var config = {
      apiKey: "...",
      authDomain: "....firebaseapp.com",
      databaseURL: "https://....firebaseio.com",
      projectId: "...",
      storageBucket: "....appspot.com",
      messagingSenderId: "..."
    };
    firebase.initializeApp(config);

    var db = firebase.firestore();

    db.collection('locations')
      .get().then(function(results){
        console.log('retrieved locations');
        results.forEach((doc) => {
          console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
        });       
      });

  }

This appears in the console a second or two after the page loads:

retrieved locations
4zMEt9s9PKIJ4WxXm63G => {"name":"Victoria"}
IK11p3uI16S4vCXg8iia => {"name":"Paddington"}
r6PGW3mf66KCw98v6Jsi => {"name":"Waterloo"}

My Database Rules are set to the “Test” setting:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

[pacific202]

Update - calling Cloud Firestore directly in the created event works fine:

<template lang='pug'>
  div
    h3 Locations
    ul(v-if='locations.length > 0')
      li(v-for='location in locations' :key='location.id') {{JSON.stringify(location)}}
    p(v-else) No Locations are available.
</template>
<script>

  import { db } from './../../firebase';

  export default {
    name: 'StaffingManagerLocations',
    data: function() {
      return {
        locations: [],
        newLocation: {}
      };
    },
    created: function(){
      db.collection('locations').get().then((QuerySnapshot) => {
        QuerySnapshot.forEach( (QueryDocumentSnapshot) => {
          this.locations.push(QueryDocumentSnapshot.data());
        });
      });
    }
  }
</script>

[sath26]

Update - calling Cloud Firestore directly in the created event works fine:

<template lang='pug'>
  div
    h3 Locations
    ul(v-if='locations.length > 0')
      li(v-for='location in locations' :key='location.id') {{JSON.stringify(location)}}
    p(v-else) No Locations are available.
</template>
<script>

  import { db } from './../../firebase';

  export default {
    name: 'StaffingManagerLocations',
    data: function() {
      return {
        locations: [],
        newLocation: {}
      };
    },
    created: function(){
      db.collection('locations').get().then((QuerySnapshot) => {
        QuerySnapshot.forEach( (QueryDocumentSnapshot) => {
          this.locations.push(QueryDocumentSnapshot.data());
        });
      });
    }
  }
</script>

it worked for me. i came across same problem and it hasnt been fixed yet