Question

我按照以下教程创建了一个聊天应用程序。 https://github.com/ammezie/laravel-chat

每件事情都是正确的，消息存储在数据库中，在推送桌面的控制台上显示，所有消息显示在页面重新加载。

问题是当我发送新消息时，它不会显示在其他用户选项卡中，直到我重新加载页面。我需要让它充满活力以下是app.js的代码，其中写入了fetch函数

created() {
        this.fetchMessages();

        Echo.private('chat')
            .listen('MessageSent', (e) => {
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
            });
    },

    methods: {
        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },
        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {});
        }

这里

以下是组件的聊天视图代码

<template>
    <ul class="chat">
        <li class="left clearfix" v-for="message in messages">
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">
                        {{ message.user.name }}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
export default {
  props: ['messages']
};
</script>

如果有些事情不明确我会提供

，感谢您的帮助

Answer 1

你可以试试。

methods: {

       var vm = this;
        fetchMessages() {
            axios.get('/messages').then(response => {
                vm.messages = response.data;
            });
        },
        addMessage(message) {
             var vm = this;
            vm.messages.push(message);

            axios.post('/messages', message).then(response => {});
        }

使用此内部函数导致问题，因为它引用该特定函数创建一个参考this的全局变量

希望这有帮助。

Answer 2

您可能要检查bootstrap.js中是否存在Laravel Echo凭据，以确保推送程序正确无误

.Vue组件未在laravel中的每个新消息上刷新

2 个答案: