Javascript .Vue组件未刷新laravel中的每个新邮件

我按照下面的教程创建了一个聊天应用程序。

一切正常，消息存储在db中，显示在pusher桌面的控制台上，所有消息显示在页面重新加载上

问题是，当我发送一条新消息时，在我重新加载页面之前，它不会显示在“其他用户”选项卡中。我需要让它充满活力 下面是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>

{{message.user.name}


{{message.message}}



导出默认值{
道具：[“消息”]
};

感谢您的帮助，如果有什么不清楚的地方，我会提供给您

您可以试试

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

---

希望这能有所帮助。

您可能需要检查bootstrap.js中是否有正确的推送器的Laravel Echo凭据。

对不起，先生！但它仍然有相同的功能issue@BabarMalik看一看，伙计我已经更新了答案我必须在不重新加载页面的情况下向用户显示新收到的消息，但我的模块在页面刷新时显示新的incomig消息。我尝试了新代码，但问题仍然相同，先生。