[Vuejs]-Cannot get data get data document in vue component with firestore

by

0👍

First, ensure that your Firestore data security rules allow read access to the ‘gallery’ collection. You can set your Firestore security rules to allow read access for all users for testing purposes:

rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
    match /{document=**} {
    allow read, write; // WARNING: This allows anyone to read/write to your Firestore!
    }
}
}

Here’s a recommended approach to fetch and bind data using VueFire:

1- Remove the manual fetch from the mounted hook:

async mounted() {
    // Remove the manual fetch
}

2- Update the firestore property to bind the collection directly to the mediaList data property:

firestore: {
    mediaList: collection(fireDB, 'gallery'),
},

Additionally, ensure you have VueFire properly set up in your Vite project, and the appropriate modules are imported:

import { ref } from 'vue';
import { collection, addDoc } from 'firebase/firestore';
import { useFirestoreCollection } from '@vueuse/firebase';

export default {
name: 'GalleryView',
setup() {
    const mediaList = useFirestoreCollection(collection(fireDB, 'gallery'));

    return {
    mediaList,
    };
},
// ...
};

Leave a comment