从 firestore 集合中获取带有 ID 的文档
Getting documents with ID from firstore collection
在使用 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
属性,但它是 non-enumerable
Any document bound by Vuexfire will retain it's id in the database as
a non-enumerable, read-only property. This makes it easier to write
changes and allows you to only copy the data using the spread operator
or Object.assign.
您可以使用 device.id
直接访问 id
。但是当传递给vue-tables-2
、devices被复制并丢失id
不可枚举属性。
我认为您可以使用 computed
属性
解决方法
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
那么,请尝试在 vue-tables-2 中使用 devicesWithId
。
在使用 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
属性,但它是 non-enumerable
Any document bound by Vuexfire will retain it's id in the database as a non-enumerable, read-only property. This makes it easier to write changes and allows you to only copy the data using the spread operator or Object.assign.
您可以使用 device.id
直接访问 id
。但是当传递给vue-tables-2
、devices被复制并丢失id
不可枚举属性。
我认为您可以使用 computed
属性
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
那么,请尝试在 vue-tables-2 中使用 devicesWithId
。