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;
});
You have to call the filter as a method:
<li v-for="item in $options.filters.limitArray(items, 3)">