无法 post 数据到 Firebase

Question

我在尝试 post 数据到 Firebase 时遇到错误。知道我做错了什么吗？我看了一些教程和官方文档，但我不知道我错过了什么。

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

以下是所有相关文件：

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

如有任何帮助，我们将不胜感激！任何帮助将不胜感激！

Answer 1

因为你import { firestorePlugin } from 'vuefire'，这意味着你使用的是 Firestore 数据库而不是实时数据库。

但是你的vuefire代码对应的是Realtime数据库，见https://vuefire.vuejs.org/vuefire/writing-data.html#updates-to-collection-and-documents

所以我认为

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')

在此处查看文档：https://vuefire.vuejs.org/vuefire/binding-subscriptions.html#declarative-binding

无法 post 数据到 Firebase

Can't post data to firebase

firebase

vue.js

vuefire

google-cloud-firestore