CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
code-8
code-8

Reputation: 58632

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>

Upvotes: 0

Views: 860

Answers (2)

hamid niakan
hamid niakan

Reputation: 2851

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

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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>

Upvotes: 1

Related Questions