我创建了从数据库中获取数据并遍历数据并将其显示在页面上的方法。当我使用$ router.push在另一条路线上,然后又回到应该在$ router.push中显示数据的路线上时,未显示。我不知道为什么。
我尝试在'$ route'上使用watch属性,但这没有帮助。我还尝试设置要在beforeRouteEnter上重新加载页面,但随后进入无限循环。
这就是我遍历数据的方式。来自模板。
<v-layout row wrap mt-5 justify-center>
<v-flex xs12 sm4 md3 lg2 v-for="serie in showSeries" :key="serie.title" pa-3>
<v-card tile flat>
<v-card-title class="px-0 py-2">
<router-link :to="{ name: 'serie', params: { title: serie.title }}" style="text-decoration: none">
<h3 class="body-3 primary--text">{{ serie.title }}</h3>
</router-link>
</v-card-title>
<v-img :src="serie.imageUrl" width="100%" height="200"></v-img>
<v-card-actions class="px-0 py-2">
<v-spacer></v-spacer>
<v-btn small depressed outline color="primary" @click="setSerie({ title: serie.title, imageUrl: serie.imageUrl })">track</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
这是组件的数据和创建的属性。
data () {
return {
series: null,
inTracker: [],
showSeries: []
}
},
created () {
const userId = this.$store.getters.user.id
db.collection('users').doc(userId).onSnapshot(doc => {
this.inTracker = doc.data().tracker
console.log(this.inTracker)
if (this.inTracker) {
this.series.forEach(serie => {
if (!this.inTracker.includes(serie.title))
this.showSeries.push(serie)
})
} else {
this.series.forEach(serie => {
this.showSeries.push(serie)
})
}
})
},
我尝试添加此内容:
beforeRouteEnter (to, from, next) {
next(vm => {
// access to component instance via `vm`
})
}
,然后从创建的方法中复制所有代码,并用this
替换vm
,就像这样:
beforeRouteEnter (to, from, next) {
next(vm => {
const userId = vm.$store.getters.user.id
db.collection('users').doc(userId).onSnapshot(doc => {
vm.inTracker = doc.data().tracker
console.log(vm.inTracker)
if (vm.inTracker) {
vm.series.forEach(serie => {
if (!vm.inTracker.includes(serie.title))
vm.showSeries.push(serie)
})
} else {
vm.series.forEach(serie => {
vm.showSeries.push(serie)
})
}
})
})
}
但这也没有帮助。
我只想在返回路由时显示所有数据。