vue.js - v-for在filter后的元素个数统计怎么处理？

问题描述

问 题

比如这段

<tbody>
<tr v-for="i in list | filterBy searchStr">
    <td> {{ i.name }} </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计共 {{  list.length }} 个
</tr>
</tfoot>

最下面的list.length，统计的是list原始元素中的元素个数。
我要统计filterBy后的元素个数，怎么办呢？

解决方案

你需要的是用computed属性，譬如：

computed: {
  filteredList: function () {
    var filter = Vue.filter('filterBy')
    return filter(this.list, this.searchStr);
  }
}

然后在template里直接用filteredList试试：

<tbody>
    <tr v-for="i in filteredList">
        <td> {{ i.name }} </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td>合计共 {{  filteredList.length }} 个
    </tr>
</tfoot>

这篇关于vue.js - v-for在filter后的元素个数统计怎么处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！