How to get count on v-if list with variable? - vuejs2

Question

I want to show one list based one variable, but if I show {{ i }} represents entire count, how I get count only the current list?
Thats my code:
<tr v-for="(item, i) in placares" v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>
The app is running here: http://digitacao.serraonline.net.br/

Answer 1

Your question is not so clear but i think this will help you:
<tr v-for="(item, index) in placares">
<div v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ index }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</div>
</tr>
Don't use v-for and v-if in same element, v-for will get priority.

Answer 2

It's not semantic, i solved the problem using one method to filter the list
methods:{
filterPlacar(dificuldade){
return _.take(_.filter(this.placares, item => {
return item.dificuldade.indexOf(dificuldade) >=0;
}),15);
}
}
And the v-for:
<tr v-for="(item, j) in filterPlacar(dificuldadeAtual.nome)">
<td>{{ ++j }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>

Answer 3

You can replace v-if with v-show like:
<tr v-for="(item, i) in placares" v-show="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</tr>
or use v-if in your tds like:
<tr v-for="(item, i) in placares">
<template v-if="item.dificuldade == dificuldadeAtual.nome">
<td>{{ i }}</td>
<td>{{ item.nome }}</td>
<td>{{ item.fase }}</td>
<td>{{ item.pontos | formatNumber }}</td>
</template>
</tr>