2

所以我正在使用 vue、echo 和 pusher 在我的 laravel 应用程序中构建一个聊天室模块。使用 laravel 进行实时广播和接收已经可以工作了，我遇到的问题是当我从 echo subscribe 函数调用 vue 实例的方法时，我在 java-script 中得到一个方法未定义的错误。请注意我是 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);
        }
    }
});
4

1 回答 1

1

除了那个之外，您在任何地方都为回调使用了粗箭头函数，因此您在this. 将其更改为

subscribeRoom()
{
    this.rooms.forEach(entry => {
        Echo.private('chat.'+entry.id)
            .listen('.newMessage', e => this.updateMessage(e.message)); 
    });
},
于 2017-03-22T23:18:38.147 回答