Question

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

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 echo中调用vue.js函数时出错

1 个答案: