Custom v-repeat filter Vue.js

Question

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?

Picodix · Accepted Answer · 2015-06-08 20:18:44Z

2

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">

answered Jun 8, 2015 at 20:18

Picodix

211 bronze badge

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

Collectives™ on Stack Overflow

Custom v-repeat filter Vue.js

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