Невозможно опубликовать данные в Firebase - PullRequest
Новая
       52

Невозможно опубликовать данные в Firebase

0 голосов
/ 25 июня 2019

Я получаю сообщение об ошибке при попытке опубликовать данные в 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()

Буду признателен за любую помощь! Любая помощь будет оценена!

1 Ответ

1 голос
/ 26 июня 2019

Поскольку вы делаете 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

...