在使用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
字段,即使我检查它是否存在于控制台中。
答案 0 :(得分:0)
基本上,每个文档已经具有id
属性,但它是non-enumerable
任何受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
})
}
}
然后,请尝试在vue-tables-2中使用devicesWithId
。