Я создаю сайт, который делает запрос в Firebase firestore. Код выглядит следующим образом:
import firebase from '@/firebase/init'
export const loadProjects = {
data: () => ({
projects: []
}),
methods: {
loadProjects () {
firebase.firestore().collection('projects')
.onSnapshot((querySnapshot) => {
var proj = []
querySnapshot.forEach((doc) => {
proj.push({
name: doc.data().name,
thumbUrl: doc.data().thumbUrl,
shortDesc: doc.data().shortDesc,
live: doc.data().live,
code: doc.data().code,
featured: doc.data().featured,
created: doc.data().created,
updated: doc.data().updated
})
})
this.projects = proj
})
}
}
}
Код отлично работает на chrome и заполняет projects
данными из всех документов в пожарном депо. Однако, когда я запускаю веб-сайт на firefox projects
, возвращается пустое.
Кто-нибудь знает почему?
Редактировать
По запросу здесь шаблон:
<template>
<v-container>
<v-expansion-panels
hover
popout
>
<v-expansion-panel>
<v-expansion-panel-header>
<h3
class="
font-weight-black
display-1
my-5
"
>
Projects
</h3>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row
justify="end"
>
<NewProjectModal @reload="loadProjects"/>
</v-row>
<v-row>
<v-col
v-for="(project, index) in projects"
:key="index"
cols="12"
sm="6"
md="4"
>
<v-card>
<v-img
:src="project.thumbUrl"
aspect-ratio="2"
></v-img>
<v-card-title>
{{ project.name }}
</v-card-title>
<v-card-text>
{{ project.shortDesc }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
<h3
class="
font-weight-black
display-1
my-5
"
>
Skills
</h3>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row
justify="end"
>
<NewProjectModal @reload="loadProjects"/>
</v-row>
<v-row>
<v-col
v-for="(project, index) in projects"
:key="index"
cols="12"
sm="6"
md="4"
>
<v-card>
<v-img
:src="project.thumbUrl"
aspect-ratio="2"
></v-img>
<v-card-title>
{{ project.name }}
</v-card-title>
<v-card-text>
{{ project.shortDesc }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-container>
</template>
<script>
import NewProjectModal from '../../components/admin/NewProjectModal'
import { loadProjects } from '../../mixins/loadData'
export default {
mixins: [loadProjects],
components: {
NewProjectModal
},
name: 'admin',
data: () => ({
}),
created: function () {
this.loadProjects()
}
}
</script>