Stable, unchanged numeration of rows in Vuetify Data Table - vue.js

Question

I'm learning Vue and Vuetify at the moment and I've faced the problem of indexing rows in data tables.
The only way I can assign the number of a row is relying on indexOf comparing to the raw array of data.
But the problem in my case is that when I sort data in the table index breaks accordingly.
I would like to have it stable and when you sort data it recalculates.
Is there any way to achieve it in Vue?
In Angular it's much easier with tables. There is a build-in functionality
Or maybe you know how to reach the filtered or sorted data (array) where Vue holds it.
<v-data-table
:headers="headers"
:items="orders"
class="elevation-2 mt-4"
:loading="loading"
loading-text="Loading... Please wait"
>
<template v-slot:item.index="{ item }">
{{ orders.indexOf(item) + 1}}
</template>
</v-data-table>
Thanks in advance!

Answer 1

The way I've managed to get it working (thanks to #elushnikova) is like this:
<v-data-table
:headers="headers"
:items="orders"
class="elevation-2 mt-4"
:loading="loading"
loading-text="Loading... Please wait"
>
<template v-slot:item="{item, index}">
<tr>
<td>{{index + 1}}</td>
<td>{{item.client_name}}</td>
<td>{{item.client_id}}</td>
<td>{{item.order_total}}</td>
</tr>
</template>
</v-data-table>
It doesn't break on sorting. But I believe later I'll have another problem with it when I have pagination.
But let's solve problems as they come :)

Answer 2

I found this in this link
<template #item.index="{ item }">
{{ protocolData.indexOf(item) }}
</template>
and its worked for me.

Answer 3

Closest way to get the result is by using a computed property as show in codepen
https://codepen.io/manojkmishra/pen/OJyYzVo
Template Part:
<div id="app">
<v-app>
<h3>Orders</h3>
<v-data-table
:headers="headers"
:items="ordersWithIndex"/>
</v-app>
</div>
Script Part:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{ text: 'Num', value: 'index' },
{ text: 'OrderName', value: 'Name' },
{ text: 'OrderValue', value: 'value' }
],
orders: [ {Name: 'order1', value: 100 },
{ Name: 'order2', value: 200 },
{ Name: 'order3', value: 300 },
{ Name: 'order4', value: 400 }
],
}
},
computed: {
ordersWithIndex()
{ return this.orders.map(
(items, index) => ({
...items,
index: index + 1
}))
}
}
})

Answer 4

This can be achieved in vuetify using item. slot, you need to pass a header for index along with other headers (eg. SNO).
now just use this in v-data-table.
<template v-slot:item.SNO = "{ index }">
{{ index + 1 }}
</template>