Re: how to Firebase firestore real time update

[Tracy Hall]

I *STRONGLY SUGGEST* that you cut'n'paste some relevant code here... nobody has time to go and search through your github to try to figure out what problems you *might* have..

Be specific - don't expect us to do the work for you.

On Saturday, May 7, 2022 at 8:17:19 PM UTC-7 bria...@gmail.com wrote:

https://github.com/zenshindm/bookCRUD

https://github.dev/zenshindm/bookCRUD

PS: sry, it seem like the Stackblitz does not work well with script setup tag

It is seem like it is duplicated data when I do an update
I know when i update the data, Firestore add new data on below of old data

How can i remove the old data, and replace it with new data? (with onSnapshot)

Need to find a way update within the array doc rather than the whole array

[Brian Chang]

I apologies , cheer and thank you for reply

here is the code 

check out in stackblitz 

https://stackblitz.com/edit/vue-jj25ks?file=src/App.vue

or here is the code

Here is the v-for loop with vuejs 3 

 <div class="col-8">

                <div class="row">

                    <div class="col-6 mt-2" v-for="book in ListOfBooks" :key="book.bookID">

                        <div class="card">

                            <div class="card-body">

                                <h5 class="card-title">Title: {{ book.bookTitle }}</h5>

                                <p class="card-text">ID: {{ book.bookID }}</p>

                                <p class="card-text">Price: {{ book.bookPrice }}</p>

                                <button :disabled="updateState" @click="updateBook(book)" class="btn btn-success mr-2">

                                    Update

                                </button>

                                <button :disabled="updateState" @click="deleteBook(book.bookID)" class="btn btn-danger">

                                    Delete

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

in my composition api script setup 

<script setup>

import { ref } from "vue";

import { db } from "@/firebaseInit.js";

import { collection, query, doc, onSnapshot, setDoc, addDoc, getDoc, getDocs, updateDoc, deleteDoc, serverTimestamp } from "firebase/firestore";

import { onMounted } from "vue";

const ListOfBooks = ref([]);

const bookID = ref();

const bookTitle = ref("");

const bookPrice = ref("");

const bookTime = ref("");

const bookTemp = ref({});

const updateState = ref(false);

// here is the realtime collection data function i am using 

function readBook() {

    // collection ref

    const colRef = collection(db, 'ListOfBooks')

    // realtime collection data

    onSnapshot(colRef, (snapshot) => {

        const ListOfBooks = [];

        snapshot.docs.forEach(doc => {

            ListOfBooks.value.push({

                bookID: doc.id,

                bookTitle: doc.data().bookTitle,

                bookPrice: doc.data().bookPrice

            })

        })

        console.log(ListOfBooks)

    })

}

onMounted(readBook);

// and here is another function i found on stackflow but it did not work 

Source: https://stackoverflow.com/questions/68235214/firestore-onsnaphot-returning-duplicate-data

function readBook() {

    // collection ref

    const bookRef = collection(db, 'ListOfBooks')

    const readingbook = onSnapshot(bookRef, (snapshot) => {

        snapshot.docChanges().forEach(change => {

            if (change.type === "added") {

                const data = {

                    bookID: change.doc.id,

                    bookTitle: change.doc.data().bookTitle,

                    bookPrice: change.doc.data().bookPrice

                };

                ListOfBooks.value.push(data);

            }

            else if (change.type === "modified") {

                const data = {

                    bookID: change.doc.id,

                    bookTitle: change.doc.data().bookTitle,

                    bookPrice: change.doc.data().bookPrice

                };

                ListOfBooks.value.push(data);

            }

            else if (change.type === "removed") {

                const data = {

                    bookID: change.doc.id,

                    bookTitle: change.doc.data().bookTitle,

                    bookPrice: change.doc.data().bookPrice

                };

                ListOfBooks.value.push(data);

            }

        });

    })

}

onMounted(readBook);

</script>

[Tracy Hall]

And what errors are you seeing?  What behavior are you expecting, and what are you getting?  Have you logged anything?  Have you shared any of the logs?