vue.js - 从 firstore 集合中获取带有 ID 的文档
问题描述
在使用 Firestore、vuefire、vue-tables-2 时,我一直在获取文档的 ID。
这是我的代码。
<v-client-table :columns="columns" :data="devices" :options="options" :theme="theme" id="dataTable">
import { ClientTable, Event } from 'vue-tables-2'
import { firebase, db } from '../../firebase-configured'
export default {
name: 'Devices',
components: {
ClientTable,
Event
},
data: function() {
return {
devices: [],
columns: ['model', 'id', 'scanTime', 'isStolen'],
options: {
headings: {
model: 'Model',
id: 'Serial No',
scanTime: 'Scan Time',
isStolen: 'Stolen YN'
},
templates: {
id: function(h, row, index) {
return index + ':' + row.id // <<- row.id is undefined
},
isStolen: (h, row, index) => {
return row.isStolen ? 'Y': ''
}
},
pagination: {
chunk: 5,
edge: false,
nav: 'scroll'
}
},
useVuex: false,
theme: 'bootstrap4',
template: 'default'
}
},
firestore: {
devices: db.collection('devices')
},
};
我的期望是设备应该id
属性为vuefire docs。
但是即使我检查它是否存在它控制台,数组this.devices
也没有字段。id
解决方案
基本上,每个文档都已经有id
属性,但它是不可枚举的
任何被 Vuexfire 绑定的文档都会在数据库中保留它的 id 作为不可枚举的只读属性。这使得编写更改更容易,并允许您仅使用扩展运算符或 Object.assign 复制数据。
您可以id
直接使用device.id
. 但是当传递给vue-tables-2
、设备时,会被复制并丢失id
不可枚举的属性。
我认为您可以使用computed
属性来解决
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
然后,请尝试devicesWithId
在 vue-tables-2 中使用。
推荐阅读
- c# - 通过 mandrill 添加电子邮件的预览文本
- javascript - Fabric js在自定义html元素上添加处理程序旋转
- html - div容器内的img定位
- android - 未调用应用内结算 onPurchaseUpdated
- php - Yii2中的多对多关系查询
- apache-spark - 在 Spark 结构化流上出现错误说“必须使用 writeStream.start() 执行带有流源的查询”
- ideavim - vim surrround ideavim - 围绕视觉选择的文本将类属性添加到结束标记
- apache-flink - Flink 窗口操作符检查点
- python - 使用 split 函数后如何迭代字符串
- amazon-web-services - 如何在 aws s3 api 中使用分隔符和 sort_by 列出对象?