时间戳

首页 > 解决方案 > .Vue 组件不会在 laravel 中的每条新消息上刷新

javascript - .Vue 组件不会在 laravel 中的每条新消息上刷新

问题描述

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

一切都是正确的，消息存储在 db 中，显示在推送器桌面的控制台上，所有消息都显示在页面重新加载上。

问题是当我发送一条新消息时，它不会显示在其他用户选项卡中，直到我重新加载页面。我需要使其动态以下是编写 fetch 函数的 app.js 的代码

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>

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

标签： javascriptlaravel

解决方案

你可以试试。

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 内部函数会导致问题，因为它引用该特定函数创建一个全局变量，参考this

希望这可以帮助。

推荐阅读