v-for在filter后的元素个数统计怎么处理?

daimon
  • 342

比如这段

<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后的元素个数,怎么办呢?

回复
阅读 5.8k
2 个回答
✓ 已被采纳

你需要的是用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>
宣传栏