The idea is to consecutively number the rows of the table, I have been doing several tests and reading the documentation, but I have not been able to find the solution.
I leave you a basic functional example, to see if you can guide me.
Thanks in advance for your time.
var vm = new Vue({
el: '#tabla',
data: {
lista: {
"2":{"nombre":"Paco",},
"7":{"nombre":"Pedro",}
},
},
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
Ejemplo:
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<th>Número</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr v-for="item in lista">
<td>X</td>
<td>{{ item.nombre }}</td>
</tr>
</tbody>
</table>
<hr>
Resultado esperado:
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<th>Número</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Paco</td>
</tr>
<tr>
<td>2</td>
<td>Pedro</td>
</tr>
</tbody>
</table>
Your data already contains an index, so you must separate the dictionary so that Vue.js can identify its parts which are the elements of the dictionary identified in the variable
items
; the dictionary keys, which are stored in the variablekeys
and the 0-based index in the variableindex
.If your data didn't have an index you could use
(items, index)
.I add a 1 to the index, so that it meets the expected result. And the link to the documentation: https://v2.vuejs.org/v2/guide/list.html#Object-v-for