Vue.js - Use filter inside v-for

powerbuoy picture powerbuoy · Dec 5, 2018 · Viewed 10k times · Source

I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this:

{{ array | limitArray(2) }}

Now I'd like to use it inside a v-for loop, like this:

<li v-for="item in items | limitArray(3)">...</li>

But that throws errors. How can I use a filter inside a v-for?

Edit: Probably unimportant, but the filter in question:

Vue.filter('limitArray', function (arr, length = 3) {
    if (arr && arr.length) {
        if (length == -1) {
            return arr;
        }
        if (length > arr.length) {
            return arr;
        }

        return arr.slice(0, length);
    }

    return null;
});

Answer

Decade Moon picture Decade Moon · Dec 6, 2018

You have to call the filter as a method:

<li v-for="item in $options.filters.limitArray(items, 3)">