Can'；t将数据发布到firebase

我试图将数据发布到firebase时出错。知道我做错了什么吗？我看过一些教程和官方文档，但我不知道我遗漏了什么

Error in v-on handler: "TypeError: Cannot read property 'rsvp' of undefined"

以下是所有相关文件：

主页.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>

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>

---

任何帮助都将不胜感激！任何帮助都将不胜感激

由于您从“vuefire”导入了{firestorePlugin}，这意味着您使用的是Firestore数据库，而不是实时数据库

但是，您的vuefire代码对应于实时数据库，请参阅

所以我认为那不是

export default {
    name: 'HomePage',
    firebase: {
        rsvp: db.ref('rsvp'),
    },
    //...
}

你应该这样做

export default {
    name: 'HomePage',
    firestore: {
        rsvp: db.collection('rsvp'),
    },
    //...
    methods: {
       addRsvp() {
           this.$firebaseRefs.rsvp.add({
               name: this.newRsvp.name,
               guests: this.newRsvp.guests,
           })
          //....
    }
}
}

因为您使用的是Firestore，而不是实时数据库

---

或者恰恰相反：您的数据库是实时数据库，然后您需要调整

main.js

，如下所示：

import Vue from 'vue'
import App from './App.vue'
import { rtdbPlugin } from 'vuefire'

Vue.use(rtdbPlugin)

new Vue({
    render: h => h(App),
}).$mount('#app')

请参见此处的文档：

export default {
    name: 'HomePage',
    firestore: {
        rsvp: db.collection('rsvp'),
    },
    //...
    methods: {
       addRsvp() {
           this.$firebaseRefs.rsvp.add({
               name: this.newRsvp.name,
               guests: this.newRsvp.guests,
           })
          //....
    }
}
}

import Vue from 'vue'
import App from './App.vue'
import { rtdbPlugin } from 'vuefire'

Vue.use(rtdbPlugin)

new Vue({
    render: h => h(App),
}).$mount('#app')