使用 Vue Firestore 设置布尔值

Question

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

我学习实验的第一阶段是简单地将其更改为 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()
  }
});

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

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

使用 Vue Firestore 设置布尔值

Setting boolean value with Vue Firestore

firebase

vue.js

vuefire

google-cloud-firestore