使用Vue中的cloudfirestore更新布尔值

Question

我是Vue和Firebase的新手。因此，我正在尝试实现一个非常简单的库应用程序。在这里，您可以创建一个带有标题、作者以及是否已"阅读"的图书对象(默认情况下始终为false(。每个组件都有一个复选框，用于更新"读取"属性的值。但是，更新函数只更新一次值，我希望每次复选框更改时它都会更改。我做错了什么？

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

我用$emit从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>

如果有人能帮我，我会非常感激。

Answer 1

我刚刚注意到我的错误。数据库有一个对象，里面有一个id和一个book对象。我正在调用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);
});
}