Error calling vue.js function from within laravel echo

Question

So i'm building a chat room module into my laravel app with vue,echo and pusher. The real-time broadcasting and receiving with laravel works already, the issue i'm having is when i call a method of the vue instance from the echo subscribe function i get a method undefined error in java-script. Please note i am a noob in vue.js Here is my app.js file of 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);
        }
    }
});

Graham · Accepted Answer · 2017-09-22 14:03:04Z

1

You used a fat arrow function for your callbacks everywhere except that one, so you lost the correct context on this. Change it to

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

edited Sep 22, 2017 at 14:03

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Mar 22, 2017 at 23:18

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error calling vue.js function from within laravel echo

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related