Introducción

VuetifyJS es un framework que añade estilos material design a nuestras apps creadas con VueJS. Existe un componente para mostrar datos en forma de tabla: v-data-table.

Podemos acceder a los elementos que se repiten con props.item pero habrá ocasiones en las que necesitaremos el índice del elemento.

Por ejemplo, si nuestros elementos son un arreglo y queremos quitar uno, necesitaríamos el índice para hacer un splice.

Acceder a index o índice en v-data-table

Es muy sencillo. Si tenemos una tabla más o menos así:

  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>

Podemos acceder al índice a través de la propiedad props.index.

Si ponemos un botón y queremos mandar el índice como argumento, lo hacemos así:

  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
      <td class="text-xs-right">
        <v-btn icon class="mx-0" @click="quitar(props.index)">
          <v-icon color="red">delete</v-icon>
        </v-btn>
      </td>
    </template>
  </v-data-table>

Así podemos acceder al índice. Esto lo encontré en un reporte de bug, el cual fue solucionado aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  Mi caja de herramientas para PHP

Únete a otros 515 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

2 Comments

Felipe · julio 4, 2019 a las 2:51 pm

Falta un ejemplo de como hacerlo cuando se esta en la pagina 2,3 o mas, ya que devuelve el indice pero de los que se esta mostrando no el indice del array original.

    parzibyte · julio 4, 2019 a las 4:11 pm

    Si tienes el número de página, multiplica el número por el índice del arreglo (y haz un if en caso de que sea un 0). Con algo de matemáticas logras saberlo
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: