CODEWITHSUNDEEP
javascriptvue.js
Nick Lewers
Nick Lewers

Reputation: 101

Custom v-repeat filter Vue.js

I've quite new to Vue.js, only started experimenting with it two days ago - so apologies if this is a dumb question.

I have a list and I would like to set a limit on how many objects should be returned to the list. I created a custom filter:

Vue.filter('limit', function (value, number) {
    for(var i = 0; i < number; i++){
        return value;
    }
});

And applied it:

<div class="project col-lg-4" v-repeat="projects | limit 3">

Yet nothing seems to change. I am aware that I could perform the limitation just using some extra js, but it would be nice to achieve this with a filter. Any help?

Upvotes: 2

Views: 2202

Answers (1)

Picodix
Picodix

Reputation: 21

You should use a filter with v-repeat:

Vue.filter('limit', function (array, limit)
{
     return array.slice(0, limit);
});

and simply use it like so:

<li v-repeat="products | limit 3">

Upvotes: 2

Related Questions