1

La idea es enumerar de forma consecutiva las filas de la tabla, he estado haciendo varias pruebas y leyendo la documentación, pero no he conseguido dar con la solución.

Os dejo un ejemplo funcional básico, a ver si me podéis orientar.

Gracias de antemano por vuestro tiempo.

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>

1 respuesta 1

2

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

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.