CODEWITHSUNDEEP
javascriptvue.js
Kevin Compton
Kevin Compton

Reputation: 746

Vue.js 1.0.15 filtering lists cannot read property of undefined

Following a basic example of filtering lists (found here: https://laracasts.com/series/learning-vue-step-by-step/episodes/14 ), using the limitBy i got stuck on the following error:

Uncaught TypeError: Cannot read property 'slice' of undefined

here is my markup:

<div v-for="product in products | limitBy 2"> ... </div>

here is my products ajax call (products are pulling in just fine):

fetchProducts: function() {

        this.$http.get('api/internal/products', function(products) {

            this.$set('products', products);

        });

    }

My products get pulled in no problem but as soon as I try to add a filter I get this console error

Upvotes: 0

Views: 1385

Answers (1)

Jeff
Jeff

Reputation: 25221

You should instantiate products as an empty array to start. In your Vue component:

data:function(){
    return {
        products:[]
    }
}

This way it doesn't try to run the limitBy filter on an undefined variable while it's waiting for that ajax request.

Upvotes: 4

Related Questions