Skip to main content
replaced https://vuejs.org/v2 with https://v2.vuejs.org/v2
Origen Enlace

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

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-for

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://v2.vuejs.org/v2/guide/list.html#Object-v-for

Origen Enlace
toledano
  • 5k
  • 10
  • 41
  • 66

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-for