vuetifyデータテーブルを使用して配列のインデックスを表示する方法は？

Question

私はvueインスタンスに渡すデータの配列を持つサーバーからの応答を持っています。私はその配列を使用してデータテーブルを完成しました。しかし、私はシリアル番号のために私の配列のインデックスを表示する方法を知る必要があります。

ここに私のコンポーネントコードが添付されています 私の応答は大丈夫です。テーブルも大丈夫です。列をさらに増やしてインデックス値を表示するだけです。

Tnks事前に 私の配列名はcustomerです。 itemとindex：あなたの小道具の一つ一つが、オブジェクト

> <v-data-table 
> v-bind:headers="headers" 
> v-bind:items="customers" 
> v-bind:search="search" 
> v-cloak 
> > 
> <template slot="items" scope="props"> 
>  <td class="text-xs-center">@{{ props.item.id }}</td> 
>  <td class="text-xs-center"> 
>   <v-edit-dialog 
>   lazy 
>   > @{{ props.item.name }} 
>   <v-text-field 
>   slot="input" 
>   label="Edit" 
>   v-model="props.item.name" 
>   single-line 
>   counter 
>   :rules="[max25chars]" 
>   ></v-text-field> 
>   </v-edit-dialog> 
>  </td> 
>  <td class="text-xs-center">@{{ props.item.email }}</td> 
>  <td class="text-xs-center">@{{ props.item.email }}</td> 
>  <td class="text-xs-center">@{{ props.item.created_at }}</td> 
>  <td class="text-xs-center"> 
>   <v-btn small outline fab class="red--text" @click="showWarning(props.item.id)"> 
>   <v-icon>mdi-account-remove</v-icon> 
>   </v-btn> 
>       
>   <v-btn small outline fab class="green--text" @click="showWarning(props.item.id)"> 
>    <v-icon>mdi-account-off</v-icon> 
>   </v-btn> 
>  </td> 
> </template> 
> <template slot="pageText" scope="{ pageStart, pageStop }"> 
>      From @{{ pageStart }} to @{{ pageStop }} 
> </template> 
></v-data-table> 

Answer 1

は、2つのキーを含んでいます。 props.indexを実行すると、各アイテムのインデックスにアクセスできます。新しいヘッダーを追加することは、ヘッダー配列に新しい項目を追加するのと同じくらい簡単です。

ここではコード例を示します。私は、データテーブルの最初の列をインデックス位置に変更しています。

https://codepen.io/potatogopher/pen/eGBpVp