Here is the code I have written:
<nav v-if="(tasks.length >= 7)" aria-label="Page navigation example">
<ul class="pagination fw-bold justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item" @click="nextTableData"><a class="page-link" href="#">2</a></li>
<li class="page-item" v-if="(tasks.length > 14)"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
nextTableData(){
let q
this.spinnerShow = true
if (this.lastdoc != null) {
q = query(this.todosCollectionRef, orderBy("date", "desc"), startAfter(this.lastdoc));
console.log(q, this.lastdoc);
} else {
q = query(this.todosCollectionRef, orderBy("date", "desc"), limit(15))
console.log(q, this.lastdoc);
}
onSnapshot(q, (querySnapshot) => {
const fbTasks = []
this.lastdoc = querySnapshot.docs[querySnapshot.docs.length - 1]
console.log(this.lastdoc);
querySnapshot.forEach((doc) => {
const task = {
id: doc.id,
title: doc.data().title,
priority: doc.data().priority,
status: doc.data().status,
desc: doc.data().desc
}
fbTasks.push(task)
})
this.tasks = fbTasks
this.spinnerShow = false
})
}
I attempted to fetch the snapshot of the last document on the table from Firebase and then utilize the startAfter method when clicking the button to retrieve data from the last document obtained. However, it encountered an error:
Function startAfter() called with invalid data. Unsupported field value: undefined
and only the code within the else block executes