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
Hi @lokineo
I have gone through with your issue and i have resolved the issue.
Go through it.
<template>
<div class="container">
<div class="row">
<div class="col">
<h2>This is book list</h2>
</div>
</div>
<div class="row">
<div class="col-4">
<form>
<div class="mb-3">
<label class="form-label">Book Title</label>
<input
v-model="bookTitle"
type="text"
class="form-control text-black"
/>
<label class="form-label">Book Price</label>
<input
v-model="bookPrice"
type="text"
class="form-control text-black"
/>
</div>
<button
v-if="!updateState"
@click="addBook"
type="button"
class="btn btn-primary"
>
Add Book
</button>
<button
v-if="updateState"
@click="updateBook3"
type="button"
class="btn btn-success"
>
Update Book
</button>
</form>
</div>
<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>
</div>
</div>
</template>
<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);
onMounted(() => {
const q = query(collection(db, "ListOfBooks"));
const unsubscribe = onSnapshot(q, (snapshot) => {
snapshot.docChanges().forEach((change) => {
if (change.type === "added") {
ListOfBooks.value.push({
bookID: change.doc.id,
bookTitle: change.doc.data().bookTitle,
bookPrice: change.doc.data().bookPrice,
});
} else if (change.type === "modified") {
const index = ListOfBooks.value.findIndex((Books) => Books.bookID === change.doc.id);
ListOfBooks.value.splice(index, 1);
ListOfBooks.value.push({
bookID: change.doc.id,
bookTitle: change.doc.data().bookTitle,
bookPrice: change.doc.data().bookPrice,
});
}
});
});
});
function addBook() {
const docRef = addDoc(collection(db, "ListOfBooks"), {
bookTitle: bookTitle.value,
bookPrice: bookPrice.value,
bookTime: serverTimestamp(),
});
}
function updateBook(bookTmp) {
updateState.value = true;
bookTemp.value = bookTmp;
bookID.value = bookTmp.bookID;
bookTitle.value = bookTmp.bookTitle;
bookPrice.value = bookTmp.bookPrice;
bookTime.value = bookTmp.bookTime;
}
function updateBook3() {
const bkID = bookID.value;
const bkt = bookTitle.value;
const bkp = bookPrice.value;
const bkTM = bookTime.value;
const userRef = doc(db, "ListOfBooks", bkID);
updateDoc(userRef, {
bookTitle: bkt,
bookPrice: bkp,
bookTime: serverTimestamp(),
});
updateState.value = false;
}
function deleteBook(id) {
deleteDoc(doc(db, "ListOfBooks", id)).then(() => {
const index = ListOfBooks.value.findIndex((Books) => Books.bookID === id);
ListOfBooks.value.splice(index, 1);
});
}
</script>
Hope this will help you!!
sry here is the stackblitz link
Omg, it works , thank you very much
It is time brush up my js skill again
Nevertheless, thank you for your help