Блог

Я хочу отобразить свои данные из своего 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, но не показываете никаких данных. И с правой стороны я рисую поле, там вы видите, что у меня есть 2 документа в моем Firestore. Я пробовал много разных вещей.

Вы не можете зацикливаться на свойстве Documents addProducts подобным образом.

Вам нужно перебирать продукты, желательно с таким названием, чтобы не вызывать путаницы:

v-for="product in Products"

И тогда вы можете получить доступ к каждому свойству addProducts карты через product.addProducts.catogorie etc.