Laravel Echo Vue Js TypeError: Cannot read property 'push' of undefined

Question

I'm having an issue particularly with Vue Js hoping someone can point me in the right direction. I am using Laravel's Echo feature which is connected to Pusher. I currently am getting data back from pusher that part is fine and dandy. The issue I can't seem to figure out is on the client side code. I'm trying to add the new items coming from pusher to the already existing items on my page. However when I use this.items.push() within the Echo channel block I am receiving a console error with TypeError: Cannot read property 'push' of undefined. I am thinking that "this.items" is out of scope?

<div id="app">
    <ul id="example-1">
        <li v-for="item in items">
            @{{ item }}
        </li>
    </ul>
</div>

<script>
    new Vue({

        el: '#app',

        data: {
            items: []
        },
        mounted: function () {
            this.listen();
        },

        methods: {
            /**
             * Listen to the Echo channels
             */
            listen: function() {

                // pushed fine from here
                this.items.push("dddd");

                Echo.channel('test_channel')
                    .listen('OrderCreated', function(e) {
                        //TypeError: Cannot read property 'push' of undefined
                        this.items.push('elkqwejfh')
                    });
            }
        }
    });
</script>

Saurabh · Accepted Answer · 2016-12-04 06:24:46Z

1

scope of this changes inside Echo.channel, you have save this in a different variable and use that variable inside instead of this, That's why it work perfectly outside Echo.channel but inside this.items is null, so it throws error. You need to make following changes:

    methods: {
        /**
         * Listen to the Echo channels
         */
        listen: function() {

            // pushed fine from here
            this.items.push("dddd");
            var self = this
            Echo.channel('test_channel')
                .listen('OrderCreated', function(e) {
                    //TypeError: Cannot read property 'push' of undefined
                   self.items.push('elkqwejfh')
                });
        }

answered Dec 4, 2016 at 6:24

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

Collectives™ on Stack Overflow

Laravel Echo Vue Js TypeError: Cannot read property 'push' of undefined

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