从 laravel 中调用 vue.js 函数时出错 echo

Question

所以我正在使用 vue、echo 和 pusher 在我的 laravel 应用程序中构建一个聊天室模块。 laravel 的实时广播和接收已经工作，我遇到的问题是当我从 echo 订阅函数调用 vue 实例的方法时，我在 java 中得到一个方法未定义的错误-脚本。请注意我是 vue.js 的菜鸟这是我的 app.js 文件 laravel

Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-messages', require('./components/ChatMessages.vue'));

window.App = {};
window.App.app = 'hello';

window.App.app = new Vue({
    el: '#wrapper',
    data: {
        messages: [],
        rooms: [],
        test: 'yes',
        first: 0
    },
    created() {
        this.fetchRooms();
    },
    methods: {
        fetchMessages(id) {
            axios.get('/messages/' + id).then(response => {
                this.messages = response.data;
                console.log(response.data);
            });
        },
        fetchRooms()
        {
            axios.get('/rooms').then(response => {
                this.rooms = response.data;
                this.first = this.rooms[0].id;
                this.fetchMessages(this.first);
                this.subscribeRoom();
            });
        },  
        sendMessage(data)
        {
            axios.post('/chat/send', {
                message: data.message,
                room_id: data.room_id
            }).then(response => {
                this.messages.push(response.data);
            });
        },
        subscribeRoom()
        {
            console.log('sub');
            this.rooms.forEach(function(entry)
            {
                Echo.private('chat.'+entry.id)
                        .listen('.newMessage',(e)=>{
                            this.updateMessage(e.message); //throws undefined error when a new message comes in also when i try to push directly says undefined variable for this.messages
                            console.log(e);
                });
            });
        },
        updateMessage(message)
        {
            this.messages.push(message);
        }
    }
});

Answer 1

除了那个回调之外，你在回调中使用了粗箭头函数，所以你在 this 上丢失了正确的上下文。改成

subscribeRoom()
{
    this.rooms.forEach(entry => {
        Echo.private('chat.'+entry.id)
            .listen('.newMessage', e => this.updateMessage(e.message)); 
    });
},

从 laravel 中调用 vue.js 函数时出错 echo

Error calling vue.js function from within laravel echo

javascript

php

vue.js

laravel-echo