在 Vue 中使用 Cloud Firestore 更新布尔值答案

【问题标题】：Updating boolean value with cloud firestore in Vue在 Vue 中使用 Cloud Firestore 更新布尔值
【发布时间】：2020-08-31 17:54:39
【问题描述】：

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

我正在使用 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>

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

【问题讨论】：

我不清楚。你期望什么行为与你观察到的不同？请编辑问题以提供更多详细信息。
在updateBook()方法中，console.log(book);写的是什么？
我假设您只想获得一个值？
我期望的行为是，每当复选框更改时，“读取”属性就会从 false 更改为 true 或相反。但这只会发生一次。 console.log(book) 写道：{__ob__: Observer} book: (...) id: (...) __ob__: Observer {value: {…}, dep: Dep, vmCount: 0} get book: ƒ reactiveGetter() set book: ƒ reactiveSetter(newVal) get id: ƒ reactiveGetter() set id: ƒ reactiveSetter(newVal) __proto__: Object
在提供附加信息时，最好编辑问题以添加详细信息，而不是将其埋在 cmets 中。问题底部有一个编辑链接。

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

我刚刚注意到我的错误。 db 有一个对象，里面有一个 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);
    });
}

【讨论】：