'How can I access index variable of a v-data-table?

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>

        &nbsp;

        <v-btn outlined class="red--text" @click="showDeleteRuleModal(index)"> Delete </v-btn>
    </template>
</v-data-table>


Solution 1:[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>

        &nbsp;

        <v-btn outlined class="red--text" @click="showDeleteRuleModal(index)"> Delete </v-btn>
    </template>

Solution 2:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Boussadjra Brahim
Solution 2 hamid niakan