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