vueNoob
vueNoob

Reputation: 51

how to get the index of an array in vuetify v-data-table with templates

I am trying to get the array index of

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,
                }
            ],

with v-for in v-slot in v-data-table with vue and vuetify but it only outputs 4 not the index. How do I get the correct index of the array.

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

Upvotes: 0

Views: 5041

Answers (1)

DigitalDirk
DigitalDirk

Reputation: 190

You would need to define a v-slot:item="{item, index}"

Like this:

<v-data-table
    :headers="headers"
    :items="items"
    >
    <template v-slot:item="{item, index}">
       {{index}}{{item}}
    </template>
</v-data-table>

Upvotes: 1

Related Questions