无法检索 Firestore 位置和时间戳对象来验证数据表

Posted 2023-02-22

【中文标题】无法检索 Firestore 位置和时间戳对象来验证数据表

【英文标题】：Can't retrive firestore location and timestamp objects to vuetify data tables

【发布时间】：2021-11-18 17:45:47

【问题描述】：

无法将 Firestore 文档 Geopoint（位置）和 时间戳（日期和时间）对象检索到 vue.js vuetify dataTables。位置在表格列上显示 [object Object] 而不是 位置数据（经度：'' 和纬度：''）。时间戳不检索日期和时间。它只是检索时间戳（秒=1631868600，纳秒=0）.Click to see table view

用于 Firestore 的 db.js

import firebase from 'firebase/app'
import 'firebase/firestore'
import Vue from 'vue'
import  firestorePlugin  from 'vuefire'

Vue.use(firestorePlugin)
// Get a Firestore instance
export const db = firebase
  .initializeApp( projectId: 'f*********-9efac' )
  .firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const  Timestamp, GeoPoint  = firebase.firestore
export  Timestamp, GeoPoint 

DataTable.vue

<template>
  <v-card>
    <v-card-title>
      Tag Information
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search Tag ID"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table 
      :headers="headers"
      :items="Tags"
      :search="search"
      item-key="tagId"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-card>
</template>

<script>
import  db  from '../firebase/db'
import  Timestamp, GeoPoint  from "../firebase/db";
export default 
  name: 'DataTable',
  props: 
    tagId: Number,
    loosed: Boolean,
    location: GeoPoint,
    timeStamp: Timestamp,

  ,
  data() 
    return 
      search: '',
      headers: [
         text: 'Tag-ID', value: 'tagId' ,
         text: 'Loosed?', value: 'loosed' ,
         text: "location", value: 'location', width: "30%" ,
         text: 'TimeStamp', value: 'timeStamp' ,
      ],
      Tags: [],
    
  ,
  firestore: 
    Tags: db.collection('Tags'),
  ,

</script>

<style>
</style>

【参考方案1】：

对于GeoPoint，您需要使用latitude 和longitude 属性，对于您需要使用toDate() 方法的时间戳。

vuefire documentation实际上有两个部分。

要在数据表中显示这些值，对于GeoPoint可以直接使用header数组对应对象的value属性中的latitude或longitude属性，如下：

  headers: [
     ... ,
     ... ,
     text: "latitude", value: 'location.latitude', width: "30%" ,
     text: "longitude", value: 'location.longitude', width: "30%" 
  ],

对于时间戳，它有点复杂，因为 toDate(§) 是一个函数：您需要使用此GitHub issue 中详述的两种方法之一，即计算值或<template v-slot:...">。

【讨论】：

这很有帮助，现在位置数据没问题。但是 toDate() 函数有错误。

"toDate() 函数有错误" => 是的，如答案中所述，您需要采用另一种方法：computed value 或使用<template v-slot:...">。