Can't post data to firebase - firebase

Question

I am getting an error when trying to post data to firebase. Any idea what I am doing wrong? I have looked at a few tutorials and the official docs but I can't figure out what I'm missing.
Error in v-on handler: "TypeError: Cannot read property 'rsvp' of undefined"
Here are all of the relevant files:
HomePage.vue
<template>
<div>
<div>
<div>
<h3>RSVP</h3>
</div>
<div>
<form v-on:submit.prevent="addRsvp">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" v-model="newRsvp.name"/>
</div>
<div class="form-group">
<label>Number of guests:</label>
<input type="number" class="form-control" v-model="newRsvp.guests"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="SUBMIT"/>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import { db } from '../config/db';
export default {
name: 'HomePage',
firebase: {
rsvp: db.ref('rsvp'),
},
data () {
return {
newRsvp: {
name: '',
guests: '',
},
}
},
methods: {
addRsvp() {
this.$firebaseRefs.rsvp.push({
name: this.newRsvp.name,
guests: this.newRsvp.guests,
})
this.newRsvp.name = '';
this.newRsvp.guests = '';
alert("Succeessfully added");
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<HomePage />
</div>
</template>
<script>
import HomePage from './components/HomePage.vue'
export default {
name: 'app',
components: {
HomePage,
}
}
</script>
<style lang="css">
#import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>
config.js
import Firebase from 'firebase'
const firebaseConfig = {
// my app config from firebase
};
const app = Firebase.initializeApp(firebaseConfig)
export const db = app.database()
Any help would be appreciated! Any help would be appreciated!

Answer 1

Since you do import { firestorePlugin } from 'vuefire', it means you are using the Firestore database and not the Realtime Database.
However, your vuefire code corresponds to the Realtime database, see https://vuefire.vuejs.org/vuefire/writing-data.html#updates-to-collection-and-documents
So I think that instead of
export default {
name: 'HomePage',
firebase: {
rsvp: db.ref('rsvp'),
},
//...
}
you should do
export default {
name: 'HomePage',
firestore: {
rsvp: db.collection('rsvp'),
},
//...
methods: {
addRsvp() {
this.$firebaseRefs.rsvp.add({
name: this.newRsvp.name,
guests: this.newRsvp.guests,
})
//....
}
}
}
since you use Firestore and not the Realtime Database.
Or it is the exact opposite: your database IS the Realtime database, and then you need to adapt your main.js as follows:
import Vue from 'vue'
import App from './App.vue'
import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin)
new Vue({
render: h => h(App),
}).$mount('#app')
See the doc here: https://vuefire.vuejs.org/vuefire/binding-subscriptions.html#declarative-binding