使用 Vue Firestore 设置布尔值答案

【问题标题】：Setting boolean value with Vue Firestore使用 Vue Firestore 设置布尔值
【发布时间】：2020-09-10 04:51:39
【问题描述】：

我是 Firebase 的新手，我希望了解有关将 Firestore 与 Vue.js 结合使用的更多信息。为了实现一些非常简单的开始，我有一个集合“Presenter”和一个名为“controls”的文档，其中包含设置为false 的单个值“present”，如下所示。

我的学习实验的第一阶段是将其简单地更改为true。以下是我到目前为止的内容，但我收到了错误：“TypeError: Cannot read property ‘presenter’ of undefined”。有什么想法我哪里出错了吗？

var config = { ... }

// Initialize Firebase.
firebase.initializeApp(config);

var db = firebase.firestore().collection("presenter");

new Vue({
  el: '#App',
  firebase: {
    presenter: db
  },
  methods: {
    getPresenter() {
      this.$firestore.presenter.doc("controls").set({
        present: true
      })
    }
  },
  mounted () {
    this.getPresenter()
  }
});

【问题讨论】：

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

【解决方案1】：

如doc 中所述，您需要使用$firestoreRefs.presenter 来引用绑定的presenter 引用。此外，您还需要使用firestore 选项，而不是firebase 选项一，后者用于实时数据库。

所以以下应该可以解决问题：

// Initialize Firebase.
firebase.initializeApp(config);

var db = firebase.firestore();

new Vue({
  el: '#App',
  firestore: {
    presenter: db.collection("presenter")
  },
  methods: {
    getPresenter() {
      this.$firestoreRefs.presenter.doc("controls").set({
        present: true
      })
    }
  },
  mounted () {
    this.getPresenter()
  }
});

【讨论】：

谢谢雷诺！我什至没有注意到我包含了 firebase 选项。我忘了提到我也在使用 vue-firestore。这引导我找到我现在要发布并标记为答案的解决方案。
你知道我最好在每次 Firestore 数据库中的数据发生变化时用谷歌搜索运行一个函数。你看，我正试图通过我的浏览器控制网站向我的一些团队的展示，实时滚动到每个人的下一部分，在我这边的空格键上。所以理想情况下，我想要一个数字属性，每次我（作为演示者）点击空格键时都会增加。我最好使用 set() 来增加和观察者的组合来将更改推送给所有实时查看网站的人？
« 我最好结合使用 set() 来增加和观察者将更改推送给所有实时查看网站的人？» -> 据我了解是的。如果您需要更多详细信息，请提出一个包含更多详细信息的新问题。

【解决方案2】：

因此，我一直在尝试使用许多 Firebase 和 Firestore 软件包作为解决方案，正如 Renaud 正确指出的那样，错误的选项组合是我的问题。

这是对我有用的组合，包括正确的脚本源，这似乎也是问题的一部分。

<!-- Vue development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Firebase -->   
<script src="https://www.gstatic.com/firebasejs/5.1.0/firebase-app.js"></script>
<!-- Firestore -->
<script src="https://www.gstatic.com/firebasejs/5.1.0/firebase-firestore.js"></script>
<!-- vue-firestore -->   
<script src="https://unpkg.com/vue-firestore"></script>

<script>
var config = { ... }

// Initialize Firebase.
firebase.initializeApp(config);

const db = firebase.firestore();

new Vue({
  el: '#App',
  firestore() {
    return {
      presenter: db.collection("presenter")
    }
  },
  methods: {
    getPresenter() {
      this.$firestore.presenter.doc("controls").set({
        present: true
      })
    }
  },
  mounted () {
    this.getPresenter()
  }
});
</script>

【讨论】：