Question

我的Web应用程序检查用户在Firebase数据库中是否有消息。如果是这样，它将从已经在我的本地数据库中发送了邮件的用户那里获取数据，并通过v-for循环将其显示在列表中。

数据是个人资料图像，姓名，姓氏和城市。在此数据下方，为每个用户显示一个消息框，以显示其来自Firebase的消息。

一切正常。我的问题是，当我从FB获得消息时，仅对所有用户显示最后一个用户消息：

您会看到用户uid = 2有3条消息，用户uid = 3有1条消息。但是我只能在所有消息框中显示用户uid = 3消息。

let app = new Vue({
    el: '#app',
    data() {
        return {
            memberData: {},
            myMessages: [],
            memberMessages: [],
            myID: userID,
            messages: ''
        }
    },
    mounted() { },
    created: function () {
        this.getAllMessages();
    },
    methods: {
        scrollBox: function () {
            let messagebox = document.querySelector('#messages-container');
            messagebox.scrollTop = messagebox.scrollHeight;
        },
        getAllMessages: function () {
            console.log(this.myID);
            let distinct = '';

            firebase.firestore().collection('private-messages')
            .where('memberID', '==', `${this.myID}`)
            .orderBy('date')
            .onSnapshot(res => {

                let members = [];
                res.forEach(doc => {
                    members.push(doc.data().uid);
                });
                distinct = Array.from(new Set(members));
                // console.log(distinct);
                
                this.getUserToTalk(distinct);
            });
        },
        getMessages: function(memberID){

            // console.log(memberID);

            firebase.firestore().collection('private-messages').where('uid', '==', `${memberID}`).orderBy('date')
            .onSnapshot(res => {
                let messages = [];
                res.forEach(doc => {
                    messages.push(doc.data());
                });
                this.memberMessages = messages;
                console.log(this.memberMessages);
            });
        },
        getUserToTalk: function (memberID) {
            // console.log(memberID);
            axios.post('http://localhost/backend/getMemberToTalk.php', {
                "token": token,
                "whoToTalkTo": memberID
            }).then(response => {
                if (response.data != "Error getting user data") {
                    this.memberData = response.data;
                    this.memberData.forEach(res => {
                        let id = res.memberID;
                        // console.log(id);
                        this.getMessages(id);
                    });
                    // console.log(this.memberData);
                } else {
                    console.log(response.data);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        sendMessage: function (memberID) {
            $('#messages_form').on('submit', (e) => {
                e.preventDefault();
                let message = this.messages;

                if (!message.trim()) return;
                console.log(message);
                this.messages = '';

                console.log(memberID);
                ...
            });
        }
    },
    mounted() {
    },
});

html：

<div id="app" class="content-wrapper">
    <div class="container-fluid">
        <div class="row messages-row" v-for="(item, index) in memberData" :key="index">
            <div class="col-md-4 col-12">
                <div class="messages-profile-infos">
                    <div class="messages-profile-infos-img img-fluid"
                        v-bind:style="{'background-image': 'url(http://localhost/backend/clients/'+item.memberProfileImg + ')' }">
                    </div>
                    <div class="messages-profile-infos-text">
                        <p>{{ item.memberName }} {{ item.memberLastname }}</p>
                        <p>{{ item.memberCity }} - {{ item.memberState }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-12">
                <div class="messages-btns">
                    <button class="btn trade-btn" onclick="showConversation()">Messages</button>
                </div>
            </div>

            <!-- conversation box -->
            <div class="conversation-container">
                <div id="messages-container" class="messages-container" :key="item.memberID">
                    <!-- <div v-for="message in allMessages" class="d-flex justify-content-start">
                        <span class="badge badge-pill badge-primary">{{ message.message }}</span>
                    </div> -->

                    <!-- actually testing with this one -->
                    <div v-if="item.memberID == message.uid" v-for="message in memberMessages" class="d-flex justify-content-start">
                        <span class="badge badge-pill badge-primary">{{ message.message }}</span>
                    </div>

                    <!-- <div v-for="message in myMessages" class="d-flex justify-content-end">
                        <span class="badge badge-pill badge-secondary">{{ message.message }}</span>
                    </div> -->

                    <!-- <div v-for="message in myMessages" class="d-flex" :class="[message.uid != myID ?'justify-content-start':'justify-content-end']">
                        <span class="badge badge-pill" :class="[message.uid != myID ?'badge-primary':'badge-secondary']">{{ message.message }}</span>
                    </div> -->
                </div>
                <div class="message-typing-container">
                    <form id="messages_form" action="" method="POST">
                        <div class="typing-container">
                            <input id="message" v-model="messages" type="text" class="message-typing" autocomplete="off" />
                            <input class="send-message" type="submit" value="Send" @click="sendMessage(item.memberID)" />
                        </div>
                    </form>
                </div>
            </div>
            <hr />
</div>

是否可以向其相应的用户显示每条消息？

Answer 1

所以，我改变了我的方法。我从数据库中获取用户数据，就像我在问题中说的那样，然后将消息从FB“附加”到其相应用户：

getMessages: function(memberID){

        let messages = [];
        firebase.firestore().collection('private-messages').where('uid', '==', `${memberID}`).orderBy('date')
        .onSnapshot(res => {
            res.forEach(doc => {
                messages.push(doc.data());
            });
            
        });
        
        this.memberMessages = messages;
        return messages;
},
getUserToTalk: function (memberID) {
        axios.post('http://localhost/backend/getMemberToTalk.php', {
            "token": token,
            "whoToTalkTo": memberID
        }).then(response => {
            if (response.data != "Error getting user data and tour" && response.data != "Error receiving data") {
                
                let joinedData = []
                console.log(response.data);
                response.data.forEach(res => {
                    let id = res.memberID;
                    // console.log(id);
                    let messages = this.getMessages(id);
                    // console.log(messages);

                    let data = {
                        memberID: res.memberID,
                        memberProfileImg: res.memberProfileImg,
                        memberName: res.memberName,
                        memberLastname: res.memberLastname,
                        memberCity: res.memberCity,
                        memberState: res.memberState,
                        messages: messages
                    }
                    joinedData.push(data);
                    // console.log(data.messages);
                });
                this.memberData = joinedData;
                console.log(this.memberData);
            } else {
                console.log(response.data);
            }
        }).catch(error => {
            console.log(error);
        });
    },

html：

<div v-if="item.memberID == message.uid" v-for="message in item.messages" class="d-flex justify-content-start">
    <span class="badge badge-pill badge-primary">{{ message.message }}</span>
</div>

Vue JS + Firebase消息系统

1 个答案: