Firebase 使用Vue Firestore设置布尔值

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

false

，如图所示

我的学习实验的第一阶段是简单地将其更改为

true

。下面是我到目前为止得到的信息，但我得到了一个错误：

“TypeError:无法读取未定义的”

的属性“presenter”。知道我哪里出错了吗

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

如中所述，您需要使用

$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&Firestore软件包作为解决方案，正如雷诺正确指出的那样，错误的选项组合是我的问题

以下是对我有效的组合，包括正确的脚本源代码，这似乎也是问题的一部分

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

变量配置={…}
//初始化Firebase。
firebase.initializeApp（配置）；
const db=firebase.firestore（）；
新Vue({
el:“#应用程序”，
firestore（）{
返回{
演示者：数据库集合（“演示者”）
}
},
方法：{
getPresenter（）{
此.$firestore.presenter.doc（“控件”）.set({
现在：对
})
}
},
挂载（）{
这个文件名为getPresenter（）
}
});

谢谢雷诺！我甚至没有注意到我包括了firebase选项。我忘了提到我也在使用vue firestore。这就引出了我现在要发布的解决方案，并将其标记为答案。你知道每次Firestore数据库中的数据发生变化时，我用谷歌搜索运行函数的最佳方法是什么吗。你看，我正试图控制一个网站从我的浏览器向我的团队的展示，滚动到realitime for everyone的下一部分，在我这边的空格键上。因此，理想情况下，我希望有一个number属性，每当我（作为演示者）点击空格键时，该属性都会递增。我最好使用set（）的组合来增加和观察者将更改推送到所有实时查看站点的人身上？«我最好使用set（）的组合来增加和观察者将更改推送到所有实时查看站点的人身上？»->据我所知，是的。如果你需要更多的细节，请问一个更详细的新问题。