0

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

应用程序.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>

配置.js

import Firebase from 'firebase'

const firebaseConfig = {
    // my app config from firebase
};

const app = Firebase.initializeApp(firebaseConfig)
export const db = app.database()

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

4

1 回答 1

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

于 2019-06-25T21:06:46.573 回答