VueJS表渲染次数

时间:2017-12-03 07:38:44

标签: html-table vue.js rendering conditional-rendering

我正在尝试列出API的5个结果。目前,通话后有超过5个结果。我试图使用索引,但因为它是条件渲染,它每次都会跳过一些结果和索引增加 - 而不是解决方案。是否有可能以某种方式分配值并在每次打印结果时递增它?

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

1 个答案:

答案 0 :(得分:0)

好的,我找到了解决方法。所以基本上我已经创建了一个过滤结果的函数:

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; 

我在循环中称呼它

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

我希望这会对某人有所帮助:)。