无法将数据发布到 Firebase答案

【问题标题】：Can't post data to firebase无法将数据发布到 Firebase
【发布时间】：2019-11-07 18:09:29
【问题描述】：

尝试将数据发布到 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>

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

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

【问题讨论】：

标签： firebase vue.js google-cloud-firestore vuefire

【解决方案1】：

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

不过你的vuefire代码对应的是实时数据库，见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

【讨论】：