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; }); 3 Answers
You have to call the filter as a method:
<li v-for="item in $options.filters.limitArray(items, 3)"> You could use method instead of filter :
<li v-for="item in limitArray(items,3)">...</li> and in your methods :
methods:{ limitArray (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; } ... } Full Example
new Vue({ el: '#app', data: { days: [{ "number": 1, "isSunday": false }, { "number": 2, "isSunday": false }, { "number": 3, "isSunday": false }, { "number": 4, "isSunday": false }, { "number": 5, "isSunday": false }, { "number": 6, "isSunday": false }, { "number": 7, "isSunday": true }, { "number": 8, "isSunday": false }, { "number": 9, "isSunday": false }, { "number": 10, "isSunday": false }, { "number": 11, "isSunday": false }, { "number": 12, "isSunday": false }, { "number": 13, "isSunday": false }, { "number": 14, "isSunday": true }, { "number": 15, "isSunday": false }, { "number": 16, "isSunday": false }, { "number": 17, "isSunday": false }, { "number": 18, "isSunday": false }, { "number": 19, "isSunday": false }, { "number": 20, "isSunday": false }, { "number": 21, "isSunday": true }, { "number": 22, "isSunday": false }, { "number": 23, "isSunday": false }, { "number": 24, "isSunday": false }, { "number": 25, "isSunday": false }, { "number": 26, "isSunday": false }, { "number": 27, "isSunday": false }, { "number": 28, "isSunday": true }, { "number": 29, "isSunday": false }, { "number": 30, "isSunday": false }, { "number": 31, "isSunday": false } ] }, methods: { limitArray(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; } } })<!DOCTYPE html> <html> <head> <meta name="description" content="Vue.delete"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src=""></script> </head> <body> <div> <table> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thi</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody> <tr> <td v-for="day in limitArray(days,7)"> {{day.number}} </td> </tr> </tbody> </table> </div>I think you should do like this:
<li v-for="item in $options.filter(v => dosomething)"> 
