Vue JS + Firebase 消息系统

Question

我的网络应用程序检查用户是否在 firebase 数据库中有消息。如果是这样，它会从在我的本地数据库中发送消息的用户那里获取数据，并将它们显示在带有v-for 循环的列表中。

数据是头像、姓名、姓氏和城市。在此数据下方会显示一个消息框，供每个用户显示他们来自 firebase 的消息。

这一切都很好。我的问题是，当我从 FB 获取消息时，只会为所有用户显示最后一条用户消息：

如您所见，用户 uid = 2 有 3 条消息，而用户 uid = 3 有一条消息。但我只能在所有消息框中显示用户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>