使用 Vue Firestore 设置布尔值

Posted

技术标签:

【中文标题】使用 Vue Firestore 设置布尔值【英文标题】:Setting boolean value with 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()
  
);

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于使用 Vue Firestore 设置布尔值的主要内容,如果未能解决你的问题,请参考以下文章

在 HTML 中传递布尔 Vue 属性值

父组件更改道具(布尔值)时子组件不更新

vue checkbox 布尔值互转01

通过模板重置vue js布尔值

如何处理 Laravel 到 Vue.js 的布尔值

使用带有布尔值的 Qsettings 迭代设置字典