在 Vue 中使用云 Firestore 更新 boolean 值

Question

我是 Vue 和 Firebase 的新手。所以我正在尝试用两者实现一个非常简单的库应用程序。 在这里，您可以创建一本书 object，其中包含标题、作者以及是否已“阅读”（默认情况下始终为 false）。 每个组件都有一个复选框来更新“读取”属性的值。 但是，更新 function 只更新一次值，我希望每次复选框更改时它都会更改。 我究竟做错了什么？

这是 App.vue 中的模板和 function：

<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);
    });
}

我正在使用 Book.vue 中的 $emit 传递数据：

<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>

如果有人可以帮助我，我将不胜感激。

Answer 1

我刚刚注意到我的错误。 该数据库有一个 object，里面有一个 id 和一本书 object。 我正在调用 object.read，这是未定义的。 我应该将它设置为 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);
    });
}