Стабильная, неизменная нумерация строк в таблице данных Vuetify

Question

Я изучаю Vue и Vuetify в данный момент, и я столкнулся с проблемой индексации строк в таблицах данных.

Единственный способ, которым я могу присвоить номер строки, - это полагаться на indexOf по сравнению с необработанным массивом данных. Но проблема в моем случае заключается в том, что при сортировке данных в таблице индекс соответственно ломается. Хотелось бы, чтобы он был стабильным и при сортировке данных пересчитывался.

Есть ли способ добиться этого в Vue? В Angular с таблицами намного проще. Имеется встроенная функция

Или, может быть, вы знаете, как получить доступ к отфильтрованным или отсортированным данным (массиву), где их хранит Vue.

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

Заранее спасибо!

Answer 1

Мне удалось заставить его работать (спасибо @elushnikova) вот так:

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

Не ломается при сортировке. Но я думаю, что позже у меня возникнет другая проблема, когда у меня будет разбивка на страницы. Но давайте решать проблемы по мере их появления :)

Answer 2

Ближайший способ получить результат - использовать вычисленное свойство, как показано в коде https://codepen.io/manojkmishra/pen/OJyYzVo

Часть шаблона:

<div id="app">
<v-app>
  <h3>Orders</h3>
  <v-data-table
    :headers="headers"
    :items="ordersWithIndex"/>
</v-app>
</div>

Часть скрипта:

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