Setting boolean value with Vue Firestore

Question

I’m new to Firebase and am looking to learn more about using Firestore with Vue.js. To implement something very simple to begin with, I have a collection ‘Presenter’ and a doc within called ‘controls’ containing the single value ‘present’ set to false as seen here.

Phase one of my learning experiment is to simply change this to true. Below is what I have so far but I’m getting the error: “TypeError: Cannot read property ‘presenter’ of undefined”. Any ideas where I’m going wrong?

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

As explained in the doc, you need to use $firestoreRefs.presenter to refer to the bound presenter reference. Also you need to use a firestore option, not a firebase option one, which is for the Realtime Database.

So the following should do the trick:

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