在 Vue 中使用云 Firestore 更新 boolean 值

Question

I'm new to both Vue and Firebase. So I'm trying to implement a very simple library app with both. Here you can create a book object with title, author and whether it's been 'read' or not(Always false by default). Each component has a checkbox to update the value of the 'read' attribute. However, the updating function only updates the value once, and I'm expecting it to change every time the checkbox changes. What am I doing wrong?

This is the template and the function in App.vue:

<template>
  <div id="app">
    <Header />
    <AddBook v-on:add-book="addBook" />
    <Books v-bind:books="books" v-on:del-book="deleteBook" v-on:update-book="updateBook" />
  </div>
</template>

updateBook(id, book) {
  console.log(book);
  db.collection("books")
    .doc(id)
    .update({
      read: !book.read,
    })
    .then(() => {
      console.log("Book successfully updated!");
    })
    .catch((error) => {
      console.error("Error updating book: ", error);
    });
}

And I'm passing the data with $emit from Book.vue:

<template>
  <div class="book" v-bind:class="{ 'is-read': book.read }">
    <p>{{ book.title }}</p>
    <p>{{ book.author }}</p>
    <input
      type="checkbox"
      v-on:change="$emit('update-book',book.id, book)"
      v-bind:checked="book.read"
    />
    <button @click="$emit('del-book', book.id)">x</button>
  </div>
</template>

If anyone could help me I'd really appreciate it.

Answer 1

I just noticed my error. The db has an object which has an id and a book object inside. I was calling the object.read, and this was undefined. I should have set it to object.book.read.

updateBook(object) {
  db.collection("books")
    .doc(object.id)
    .update({
      read: !object.book.read,
    })
    .then(() => {
      console.log("Book successfully updated!");
    })
    .catch((error) => {
      console.error("Error updating book: ", error);
    });
}