我想显示来自 Firestore 的数据，但将鼠标悬停在 <td> 标签上时，它显示已获取数据，但并未显示。

我的文件用于从 Firestore 获取数据

<template>
    <v-container>
        <v-btn @click="back" dark>Back</v-btn>
        <h1>apple</h1>
        <v-simple-table>
            <template v-slot:default>
                <thead>
                    <tr>
                        <th class="text-left">Catogorie</th>
                        <th class="text-left">Product</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="addProducts in Products" :key="addProducts.id">
                        <td>{{addProducts.catogorie}}</td>
                        <td>{{addProducts.product}}</td>
                    </tr>
                </tbody>
            </template>
        </v-simple-table>
    </v-container>
</template>

<script>
/*eslint-disable-line*/import { db } from '../../Database';
import firebase from 'firebase';

export default {
    firestore: {
        Products: db.collection('Products')
    },
    data() {
        return {
            Products: []
        }
    },
    methods: {
        back() {
            location.reload();
            console.log(firebase.auth().currentUser)
        }
    },
    created() {
        console.log(this.Products)
    }
}
</script>

FireStore

在左侧，您可以看到 td 标签，但没有显示任何数据。在右侧，我画了一个框，您会看到我的 Firestore 中有 2 个文档。我尝试了很多不同的东西。