vue.js - 在 vuetify 中使用 Firestore 进行服务器端分页
问题描述
我正在做一个项目,我想对集合中的数据进行分页,该集合包含数千条记录,所以在这种情况下,我无法使用数据表,它会在第一次请求时呈现所有数据,因此读取可能会受到影响计费。我查看了 vuetify js 数据表,这对项目非常有用,但我不知道它将如何与 firestore 一起使用。我想加载前 10 条记录,当单击下一个按钮时,应该使用偏移量或其他方式加载下 10 条记录。
如果你想看我的方式,我正在使用这个 vuetify 的例子https://codepen.io/pen/?&editors=101
模板代码:
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
:headers="headers"
:items="desserts"
:pagination.sync="pagination"
:total-items="totalDesserts"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
</v-app>
</div>
Vue.js 代码:
new Vue({
el: '#app',
data () {
return {
totalDesserts: 0,
desserts: [],
loading: true,
pagination: {},
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
]
}
},
watch: {
pagination: {
handler () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
deep: true
}
},
mounted () {
this.getDataFromApi()
.then(data => {
this.desserts = data.items
this.totalDesserts = data.total
})
},
methods: {
getDataFromApi () {
this.loading = true
return new Promise((resolve, reject) => {
const { sortBy, descending, page, rowsPerPage } = this.pagination
let items = this.getDesserts()
const total = items.length
if (this.pagination.sortBy) {
items = items.sort((a, b) => {
const sortA = a[sortBy]
const sortB = b[sortBy]
if (descending) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (rowsPerPage > 0) {
items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
}
setTimeout(() => {
this.loading = false
resolve({
items,
total
})
}, 1000)
})
},
getDesserts () {
return [
{
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
value: false,
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
value: false,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
value: false,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
},
{
value: false,
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%'
},
{
value: false,
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%'
},
{
value: false,
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%'
},
{
value: false,
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%'
},
{
value: false,
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%'
},
{
value: false,
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%'
}
]
}
}
})
在这里,我想使用getDesserts()
方法使用限制和偏移量从 Firestore 加载我的数据。
解决方案
推荐阅读
- java - Elasticsearch - ElasticRestHighLevelClient 使用分区过滤值
- airflow - 在 Airflow 中使用 DatabricksSubmitRunOperator 将文件从 S3 获取到 Databricks?
- java - Spring Kafka Binder 未收到任何消息但已连接到主题
- java - Maven root pom.xml 插入文件内容
- javascript - 每当“it”块中发生错误或异常时,“after”钩子中的单击事件在“Cypress”中不起作用
- python - Flask-Caching 正在从模板缓存 CSRF 令牌
- amazon-web-services - 如何将我的 vue 应用程序的秘密存储在 AWS lambda 中
- jcl - IBM Z Xplore JCL1 挑战 Abend U4038
- r - R Shiny 文本输出显示为控制台输出,而不是 rmarkdown 生成的 PDF 下载中的文本
- python - 在 python 中打开和写入文本时,为什么我的内容不见了