如何访问 v-data-table 的索引变量？

Question

我通常会这样做

<v-row v-for="(rule, index) in ruleDetails" :key="index">
 ... I should have access to index then... 

...但是现在...

我不在 v-for 我在 table.

如何访问 table 的 index 变量？

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

Answer 1

您可以使用 item 插槽作为第二个参数来获取它：

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

Answer 2

根据您可以访问索引的文档，如果您使用项目槽：item-slot documentation

但是如果您不想使用 item 插槽，您可以使用计算来将索引包含在您传递给 v-data-table 的对象中，并且计算就像这样:

computed: {
  dataTableItems() {
    return this.rules.map((x, i) => ({index: i, ...x}));
  }
}

然后在您有权访问 item 的每个插槽中，您可以使用 item.index

找到索引