Vuetifyのデータテーブルでaxiosを使ってサーバーからitem情報を取得できない

-実現したいこと

ボタンを押すとサーバーから受け取った辞書データをVuetifyのデータテーブル・コーポネントの表の中に入れて表示するプログラムを作成したいと考えています。

発生している問題・エラーメッセージ

{{kiroku}}でaxiosを使ってサーバーからデータをkiroku:[]に受け取っていることが出来たのですが、
<v-data-table>の中のitem内に正しくデータが渡せていないのか、表にはheadersだけ表示されて、
データが表示されるitemの箇所にはNo data availableと表示されてしまいます。

vueを学び始めたばかりで初歩的な質問で申し訳ありませんが、よろしくお願いいたします。

該当のソースコード

vue
1<template>
2  <v-row>
3    <v-col>
4      <v-btn
5      @click="getdata()">
6        <span>GETDATA</span>
7      <v-btn>
8      {{kiroku}}
9      <template>
10        <v-data-table
11        :headers="headers"
12        :item="kiroku"
13        ></v-data-table>
14      </template>
15    </v-col>
16  </v-row>    
17</template>
18
19<script>
20export default{
21  name:'App',
22  data(){
23    return{
24      headers:[
25        {text:'ユーザーID',value:'userId'},
26        {text:'ID',value:'id'},
27        {text:'タイトル',value:'title'},
28        {text:'コンプリート',value:'completed'}        
29      ],
30      kiroku:[
31      ]
32    }
33  },
34  methods:{
35    getdata(){
36      this.axios.get(`https://jsonplaceholder.typicode.com/todos/1`)
37      .then(response=>{
38        this.kiroku=response.data
39      })
40      .catch(error=>console.log(error))
41    }
42  }
43}
44</script>
45
46
47

行動規範の内容に同意します

回答1件

ベストアンサー

以下の2点を見直してみると正しく動作するかと思います。

1. `v-data-table` のデータを受け付けるpropの名前

上記のコードでは item となっていますが、正しくは items です。
参考: https://vuetifyjs.com/en/api/v-data-table/#api-props

2. テストデータの取得URL

v-data-table のitemsは配列型のデータを受け付けますが、上記コードにある https://jsonplaceholder.typicode.com/todos/1 は単一のitemを返却するAPIのようです。
正しくは、 https://jsonplaceholder.typicode.com/todos ではないでしょうか？
または、次のように単一のitemを配列にしてから代入すると表示が可能かと思います。