VueJS表格渲染次数答案

【问题标题】：VueJS table rendering number of timesVueJS表格渲染次数
【发布时间】：2018-05-16 21:53:39
【问题描述】：

我正在尝试列出来自 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>

【问题讨论】：

澄清他的问题：他在列表中有 5 个项目，因此索引是 0 - 4，但由于他有条件地显示项目，它可能显示像 0, 2, 4 这样的数字而不是 0, 1, 2。我认为....

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

【解决方案1】：

好的，我已经找到了解决方案。所以基本上我已经创建了一个我想要的过滤结果的函数：

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>

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

【讨论】：

你也可以使用计算变量。