Firestore的Geopoint、Timestamp对象无法正确渲染到Vuetify数据表格

问题根因 #

Vuetify 数据表格默认会直接调用字段值的toString()方法渲染内容：

• Firestore 返回的 Geopoint 是包含latitude（纬度）、longitude（经度）属性的对象，直接调用toString()就会输出[object Object]
• Firestore 返回的 Timestamp 是特殊时间对象，默认toString()会输出带秒数、纳秒的原始格式，需要先转换为JS原生Date对象再格式化展示

解决方案 #

只需修改DataTable.vue中v-data-table的代码，通过自定义列插槽手动指定两个特殊字段的渲染逻辑即可：

1. 基础修改（直接用内置方法格式化）

替换原有v-data-table代码段：

<v-data-table 
  :headers="headers"
  :items="Tags"
  :search="search"
  item-key="tagId"
  :items-per-page="5"
  class="elevation-1"
>
  <!-- 自定义地理位置列渲染 -->
  <template v-slot:item.location="{ item }">
    纬度：{{ item.location.latitude }}，经度：{{ item.location.longitude }}
  </template>
  <!-- 自定义时间列渲染，toLocaleString()会自动转为当前时区的本地时间格式 -->
  <template v-slot:item.timeStamp="{ item }">
    {{ item.timeStamp.toDate().toLocaleString() }}
  </template>
</v-data-table>

2. 进阶修改（自定义时间格式）

如果需要统一时间显示格式，可新增格式化方法：
在组件的methods配置中添加：

methods: {
  // 自定义时间格式化，输出格式示例：2021-09-17 14:30:00
  formatFirestoreTime(timestamp) {
    const date = timestamp.toDate()
    return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}:${String(date.getSeconds()).padStart(2,'0')}`
  }
}

再把时间列插槽的内容替换为：

<template v-slot:item.timeStamp="{ item }">
  {{ formatFirestoreTime(item.timeStamp) }}
</template>

冗余代码提示 #

当前组件props中定义的tagId、loosed、location、timeStamp属性是父组件传值时才需要的配置，你现在直接从Firestore拉取Tags数组渲染，这部分配置没有实际作用，可以直接删除。

内容的提问来源于stack exchange，提问作者Ke_Sandaru