javascript - v-on 处理程序中出现错误 : "Error: Reference.set failed: First argument contains undefined"

Question

哪里可能发生吹气错误？我已经盯着这个看了有一段时间了，无法弄清楚。我尝试控制台日志，所有数据都被输入到数据库中，并且它们都有值......

我正在尝试将当前消息推送到数据库以创建实时聊天应用程序。下面提供的是代码。

该项目使用 firebase 和 VueJs。

CreateMessage.vue(我认为错误所在)

<template>
    <div class="container" style="margin-bottom: 30px">
        <form>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Enter message ..." v-model="newMessage">
                <p class="text-danger" v-if="errorText">{{ errorText }}</p>
            </div>

            <button class="btn btn-primary" type="submit"  @click.stop.prevent="createMessage"> Submit</button>
        </form>
    </div>
</template>

<script>
    import firebase from '../components/firebaseconfig';
    import AuthMonitor from '../AuthMonitor';
    import Login from '../components/Login';

    export default {
        name: 'CreateMessage',
        mixins:[AuthMonitor],
        data(){
            return {
                newMessage: "",
                errorText: "",
                user: firebase.auth().currentUser
            }
        },
        methods: {
            createMessage () {
                console.log(this.newMessage);
                if (this.newMessage != '') {
                    console.log(Date.now());
                    firebase.database().ref("messages").push().set({
                        message: this.newMessage,
                        name: this.user,
                        timestamp: Date.now()
                }).catch(err => {
                        console.log(err);
                    });
                this.newMessage = "";
                this.errorText = "";
                } else {
                    this.errorText = "A message must be entered!"
                }
            }
        }
    }
</script>

ChatRoom.vue 。 ( View )

<template>
    <div class="chat container" v-if="isAuth">
        <h2 class="text-primary text-center">Real-Time Chat</h2>
        <h5 class="text-secondary text-center">Powered by Vue.js & Firebase</h5>
        <div class="card">
            <div class="card-body">
                <p class="nomessages text-secondary" v-if="messages.length == 0">
                    [No messages yet!]
                </p>
                <div class="messages" v-chat-scroll="{always: false, smooth: true}">
                    <div v-for="message in messages" :key="message.id">
                        <span class="text-info">[{{ message.name }}]: </span>
                        <span>{{message.message}}</span>
                        <span class="text-secondary time">{{message.timestamp}}</span>
                    </div>
                </div>
            </div>
            <div class="card-action">
                <CreateMessage/>
            </div>
        </div>
    </div>
</template>

<script>
    import CreateMessage from '@/components/CreateMessage';
    import firebase from '../components/firebaseconfig';
    import AuthMonitor from '../AuthMonitor';
    import moment from 'moment';

    export default {
        name: 'Chat',
        mixins:[AuthMonitor],
        components: {
            CreateMessage
        },
        data() {
            return{
                messages: []
            }
        },
        // created() {
        //     let ref = firebase.database().ref('messages');

        //     ref.onSnapshot(snapshot => {
        //         snapshot.docChanges().forEach(change => {
        //             if (change.type == 'added') {
        //                 let doc = change.doc;
        //                 this.messages.push({
        //                     id: doc.id,
        //                     name: doc.data().name,
        //                     message: doc.data().message,
        //                     timestamp: moment(doc.data().timestamp).format('LTS')
        //                 });
        //             }
        //         });
        //     });
        // }
    }
</script>

<style>
.chat h2{
    font-size: 2.6em;
    margin-bottom: 0px;
}

.chat h5{
    margin-top: 0px;
    margin-bottom: 40px;
}

.chat span{
    font-size: 1.2em;
}

.chat .time{
    display: block;
    font-size: 0.7em;
}

.messages{
    max-height: 300px;
    overflow: auto;
}
</style>

Answer 1

错误消息告诉您 this.user 包含一个属性 ja，其中包含未定义的值。您不能将未定义的值放入实时数据库中。