How can I access index variable of a v-data-table? - vue.js

Question

I normally would do this
<v-row v-for="(rule, index) in ruleDetails" :key="index">
... I should have access to index then...
... but now ...
I am not inside a v-for I am inside a table.
How can I access index variable of a table ?
<v-data-table
:headers="headers"
:items="rules"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="name"
show-expand
class="elevation-0"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>{{ name }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn outlined class="green--text" #click="showAddRuleModal()">
<v-icon dark> add </v-icon>
Rule
</v-btn>
</v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">{{ item.conditions }}</td>
</template>
<template v-slot:item.id="{ item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>
</v-data-table>

Answer 1

You could get it using the item slot as the second argument:
<template v-slot:item="{ expand, index, item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>

Answer 2

based on the documentation you have access to index if you use item slot: item-slot documentation
but if you don't want to use item slot, you can use a computed to include the index in the objects that you are passing to the v-data-table and that computed is like this:
computed: {
dataTableItems() {
return this.rules.map((x, i) => ({index: i, ...x}));
}
}
then in each slot where you have access to item you can find the index by using item.index