Question

我正在尝试获取的数组索引

serverList: [
                {
                    server: "server.com",
                    status: "-",
                    id: 0,
                },
                {
                    server: "help.server.org",
                    status: "16",
                    id: 1,
                },
                {
                    server: "test.server.net",
                    status: "16",
                    id: 2,
                },
                {
                    server: "support.server.com",
                    status: "32",
                    id: 3,
                },
                {
                    server: "help.otherserver.com",
                    status: "32",
                    id: 4,
                }
            ],

在带有vue和vuetify的v-data-table中的v-slot中带有v-for，但仅输出4，而不输出索引。如何获取数组的正确索引。

<v-data-table
            :headers="headers"
            :items="serverList"
            class="elevation-1"
            hide-default-footer
    >
        <template v-slot:item="{ item }" v-for="(item,index) in serverList">
            <tr>
                <td>
                    <v-text-field v-model="item.server"
                                  label="Solo"
                                  solo
                                  hide-details
                    >
                    </v-text-field>
                </td>
                <td>
                    {{ item.status }}
                </td>
                <td>
                    <div class="text-center">
                        <v-btn @click="deleteItem(index,item)"
                               fab
                               small
                        >-</v-btn>
                    </div>
                </td>
            </tr>
        </template>
    </v-data-table>

Answer 1

索引存在于您的v-for声明中。

(item,index) in serverList

您现在可以在每个记录的呈现上使用索引：

{{item.status}} -- {{index}}

如何使用模板在vuetify v-data-table中获取数组的索引

1 个答案: