I've created a to-do app where clicking on an item should mark it as completed.
However, I encounter an error when trying to toggle the completion status of an item imported from Firebase:
Error in v-on handler: "TypeError: todo.toggleChecked is not a function"
As a newcomer to Firebase and Vue, I'm unsure why this issue is occurring.
Below is the code snippet in question:
TodoList.vue
<template>
<div class="todolist">
<h3>TodoList</h3>
<b-input-group class="mt-3">
<b-form-input
v-model="todoInput"
placeholder="Add task"
aria-describedby="Add task"
></b-form-input>
<b-input-group-append>
<b-button variant="primary" @click="addTodo()">Add</b-button>
</b-input-group-append>
</b-input-group>
<b-list-group>
<b-list-group-item
v-for="(todo, index) in todoList"
:key="index"
class="d-flex justify-content-between align-items-center mt-3"
:variant="listItemStyle(todo.checked)"
@click="toggleCompletion(todo)"
>
{{ todo.todo }}
<b-button variant="outline-dark" @click.stop="deleteTask(todo)" pill
><font-awesome-icon icon="fa-solid fa-trash"
/></b-button>
</b-list-group-item>
</b-list-group>
</div>
</template>
... (rest of the component code)
In addition, I'm struggling to find documentation for this particular syntax style. Most tutorials use a different approach like:
app
.firebase()
.collection('collectionName')
.add(itemToAdd)
.then((result) => { moreCode })
Unfortunately, this standard format doesn't seem to work with my project.
UPDATE: I managed to resolve the issue by modifying the way I retrieve values from Firestore using the following syntax:
async function getTodo(db: Firestore) {
const todoCol = collection(db, "todolist");
const todoSnapshot = await getDocs(todoCol);
const todoList = todoSnapshot.docs.map((doc) => {
let docTodo = new Todo(doc.data()['todo']);
docTodo.checked = doc.data()['checked'];
return docTodo;
});
return todoList as Todo[];
}