v-forループを使用して、data-table内に連想配列のプロパティの情報を出力したい。

Question

Nuxt.jsを使用しておりまして、VuetifyのCSSフレームワークを使用しております。
将来的にＡＰＩを取得して、v-for ループ使用して、情報を表示したいと考え
今回作成しているときに詰まってしまいました。

vuetifyのコンポーネントである、v-data-tableに:itemsのpropを指定せずに、
tbodyを使用して、連想配列内のプロパティを表示させたいと思っております。
しかし、現在データが表示されていない状態です。

特にエラーメッセージが出ておらず、どうすればデータが表示されるのか
悩んでおります。
お力添えいただけませんでしょうか？

<template>
  <v-data-table :headers="header" dense class="elevation-1">
    <tbody v-for="customer in customers" :key="customer">
      <tr>
        <td>{{customer.name}}</td>
        <td>{{customer.id}}</td>
        <td>{{customer.age}}</td>
      </tr>
    </tbody>
  </v-data-table>
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'

@Component
export default class extends Vue{
 header=[
     {text:'name',value:'name'},
     {text:'id',value:'id'},
     {text:'age',value:'age'}
 ]
 customers=[
     {name:'jon',id:1,age:21},
     {name:'dan',id:2,age:23},
     {name:'bob',id:3,age:25},
     {name:'ali',id:4,age:41}

 ]
}
</script>

Answer 1

v-data-tableコンポーネントでtbody以下をカスタマイズしたい場合はbodyスロットを使用します。
tbodyとtrタグのclass名はカスタマイズされていることを確認するために便宜上付けたものです。

<v-data-table :headers="header" :items="customers" dense class="elevation-1">
  <template v-slot:body="{ items: customers }">
    <tbody class="custom-body">
      <tr v-for="customer in customers" :key="customer.id" class="custom-tr">
        <td>{{ customer.name }}</td>
        <td>{{ customer.id }}</td>
        <td>{{ customer.age }}</td>
      </tr>
    </tbody>
  </template>
</v-data-table>

bodyスロットの詳細なドキュメントはデータテーブルにありますのでご確認ください。

Comments

[takochan1192]

ありがとうございます。
公式サイトにあったのですね。