VueJS table rendering number of times

Question

I am trying to list 5 results from API. Currently, after a call there are more than 5 results. I've tried to use an index but as it is conditional rendering which skips some results and index increases each time - not a solution. Is it possible somehow to assign value and increment it each time result prints out?

<tr v-for="(request, index) in client.requests" v-if="request.request_status_id == 1">
     <td>{{ request.request_type.name }}</td>
     <td>{{ request.created_at }}</td>
</tr>

Answer 1

Ok, I've found a solution for this. So basically I've created a function for filtering results as I wanted:

filterList(list){
var temp = [];
var count = 0;

for(var i = 0; i < list.length; i++){
    if(list[i].request_status_id == 1 && count < 5) {
        temp.push(list[i]);
        count++;
    }
}

return temp; 

And I call it in my loop

<tr v-for="(request, index) in filterList(client.requests)">
<td>{{ request.request_type.name }}</td>
<td>{{ request.created_at }}</td>

I hope this will help someone :)