arrays - Vue 返回观察者和数组

Question

我目前正在开发一个私人聊天室。当我从浏览器窗口发送消息时，我启动了两个浏览器，其中一个处于隐身状态，我 console.log 记录了聊天数组，但它是一个 vue 观察者对象。当我从浏览器窗口 2 发送消息时，我 console.log 相同的聊天数组，但它告诉我这是一个数组第一个浏览器窗口给出错误 this.chats.push 不是函数第二个浏览器窗口接受该函数并保存消息并将其添加到聊天数组。

任何人都可以向我解释它为什么这样做吗？只是好奇

<template>
    <div class="card card-default chat-box">
        <div class="card-header">
            <b :class="{'text-danger':isBlocked}">
                {{friend.first_name}}
                <span v-if="isBlocked">(Blocked)</span>
            </b>

            <!--      Close button      -->
            <a href="" @click.prevent="close">
                <font-awesome-icon icon="times" class="float-right"/>
            </a>
            <!--      Close button ends here      -->

            <!--       Options     -->
            <div class="dropdown float-right">
                <b-dropdown variant="link" no-caret toggle-class="text-decoration-none">
                    <template v-slot:button-content>
                        <font-awesome-icon icon="ellipsis-v"/>
                    </template>
                    <b-dropdown-item href="" @click.prevent="block" v-if="!isBlocked">Block</b-dropdown-item>
                    <b-dropdown-item href="" @click.prevent="unblock" v-if="isBlocked">Unblock</b-dropdown-item>
                    <b-dropdown-item href="" @click.prevent="clear">Clear</b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                    <b-dropdown-item active>Active action</b-dropdown-item>
                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
                </b-dropdown>
            </div>
            <!--       Options Ends     -->
        </div>
        <div class="card-body" v-chat-scroll>
            <p class="card-text" :class="{'text-right': chat.type === false}" v-for="chat in chats" :key="chat.id">
                {{chat.message}}
            </p>
        </div>
        <form class="card-footer" @submit.prevent="send">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Write your message"
                       :disabled="isBlocked" v-model="message"
                >
            </div>
        </form>
    </div>
</template>

<script>
    import {faIcons} from "@fortawesome/free-solid-svg-icons";
    import {DropDownButtonPlugin} from "@syncfusion/ej2-vue-splitbuttons";

    Vue.use(DropDownButtonPlugin);

    export default {
        props: ['friend'],
        computed: {
            queen() {
                return faIcons;
            }
        },
        data() {
            return {
                chats: [],
                message: null,
                isBlocked: false
            }
        },
        methods: {
            send() {
                if (this.message) {
                    this.pushToChats(this.message);
                    axios.post('/dashboard/chats/messages/store', {
                        session_id: this.friend.session.id,
                        message: this.message,
                        to_user_id: this.friend.id
                    });
                    this.message = null;
                }
            },
            pushToChats(message) {
                // this.getAllMessages();
                console.log(this.chats);
                console.log(typeof this.chats);
                this.chats.push({message: message, type: false, send_at: 'Just Now'});
            },
            close() {
                this.$emit('close');
            },
            clear() {
                this.chats = [];
            },
            block() {
                this.isBlocked = true
            },
            unblock() {
                this.isBlocked = false;
            },
            getAllMessages() {
                axios.post(`/dashboard/chats/session/${this.friend.session.id}`)
                    .then(res => this.chats = res.data
                    );
            }
        },
        created() {
            this.getAllMessages();

            Echo.private(`Chat.${this.friend.session.id}`).listen('PrivateChatEvent', (e) => {
                this.chats.push({message: e.content, type: true, send_at: 'Just Now'})
            });
        },
        name: "MessageComponent"
    }
</script>

<style scoped>
    .chat-box {
        height: 400px;
    }

    .card-body {
        overflow-y: scroll
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

标签： arraysvue.jsobservers