Tus datos ya contienen un índice, por lo que debes separar el diccionario para que Vue.js pueda identificar sus partes que son los elementos del diccionario identificados en la variable items
; las claves del diccionario, que se almacenan en la variable keys
y el índice con base 0 en la variable index
.
Nota
Si tu data no tuviera un índice podrías usar (items, index)
.
var vm = new Vue({
el: '#tabla',
data: {
lista: {
"2": {"nombre": "Paco"},
"7": {"nombre": "Pedro"}
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<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">
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<th>Número</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, key, index) in lista">
<td><code>index:</code> {{ index + 1 }}</td>
<td><code>clave:</code> {{ key }} - <code>item: </code> {{ item.nombre }}</td>
</tr>
</tbody>
</table>
Al índice le agrego un 1, para que cumpla con el resultado esperado. Y el enlace a la documentación: https://vuejs.org/v2/guide/list.html#Object-v-forhttps://v2.vuejs.org/v2/guide/list.html#Object-v-for