VuetifyJS

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í.