v-data-tableの中にtbodyとv-forループを使用して、取得したＡＰＩの値を挿入していきたい。

Question

vuetify のv-data-tableの:itemsを使用するのではなく、
tbodyを使用して、Rest APIで取得した情報を表示したいと考えております。
現状、画面の表示ができません。
今回は、テスト用として、JsonPlaceholderの情報を使用しております。

また、エラーに連想配列内のネストになった部分のデータを取得する部分が
うまくいっておらず、エラーメッセージが出てしまいました。

画面への表示をするにあたり、私のコードの誤りがある部分および
連想配列内の情報の取得方法についてどなたかご教示いただけましたら、
幸いです。

<template>
    <div>
        <v-data-table
         dense
         :headers="header"
         >
         <template>
             <tbody v-for="user in users" :key=user.name>
                 <tr>
                     <td>{{user.name}}</td>
                     <td>{{user.email}}</td>
                     <td>{{user.address.street}}</td>
                 </tr>
             </tbody>
         </template>
        </v-data-table>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue{
    header = [
        {name:'name',value:'name'},
        {name:'email',value:'email'},
        {name:'street',value:'address.street'}
    ]
    users:object[]=[]
    async mounted(){
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data.map((item:any)=>({
            name:item.name,
            email:item.email,
            street:item.address.street
        }));
    }    
}
</script>

Answer 1

t-bodyを書かなくても、APIから取得したデータを表示することはできると思います。

• Template側

:item="users"にすればusersの値をテーブルに表示することができます。

<v-data-table
      dense
      :headers="header"
      :items="users"
    >
</v-data-table>

• Script

headerの部分少し変えてあげれば表示できると思います。
headerのtextはヘッダとして表示したい文字列、valueはitem(今回はusers)の連想配列のデータの名前と一致します。

      header: [
        { text: 'name', value: 'name' },
        { text: 'email', value: 'email' },
        { text: 'street', value: 'street' },
      ],
      users: [],

Comments

[takochan1192]

ご回答いただきましてありがとうございます！