Nuxt.jsを使って、WEB APIを取得してデータテーブルに情報を並べたい。

Question

Nuxt.jsを使用して、ＷＥＢ　ＡＰＩから情報を取得し、データテーブル上に並べたものを作成したいと思い、サンプルコードを作成したのですが、中々うまくいきません。

完成形は下記のようなものをイメージしております。

昨日もこちらで、axiosについて質問させていただきまして、なんとか使用方法がわかったつもりでおりましたが、まだまだわからないことだらけで、困っております。

私が作成したサンプルコードで実行した結果、データが表示されませんでした。

下記サンプルコードを貼り付けますので、ご教示いただけますと幸いです。

<template>
  <v-data-table
    :headers="headers"
    :items="response"
    :items-per-page="5"
    class="elevation-1"
    ></v-data-table>
</template>
<script>
import $axios from 'axios';

export default {
    data(){
        return{
            headers:[
                {
                    text:'name',
                    align:'start',
                    sortable:'false',
                    value:'name',
                },
                {text:'username',value:'username'},
                {text:'email',value:'email'},
            ],
        }
    },
    async asyncData({ $axios }){
        const response = await $axios.get('https://jsonplaceholder.typicode.com/users')
            return{
                name:response.data,
                username:response.data,
                email:response.data,
            }
    }       
}
</script>

Comments

[hope_mucci]

目標はわかりますが現状のコードで「どのような点がうまくいってないか」をきちんと説明してください。
下記ヘルプを読んで現状の表示やエラーメッセージを追記しましょう。
https://teratail.com/help/question-tips#questionTips3-4

[takochan1192]

hope_mucci様
大変失礼いたしました。ご指摘ありがとうございます。実行結果を追記させていただきました。

Answer 1

templateをこう変えて(response=>items)

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    class="elevation-1"
    ></v-data-table>
</template>

axios.getのあとのreturn処理をこう変えるとどうでしょうか。

return { items: response.data }

Comments

[takochan1192]

markey様
ご回答いただきまして、誠にありがとうございます。問題なく実行することができました。

[markey]

補足しますと元のコードの問題点はこれらです。

- templateのほうで「response」という名前で参照するのであれば、ayncDataでkeyがresponseのオブジェクトをreturnしないといけない
- nameもusernameもemailも全部response.dataを参照していた

asyncDataについては公式ドキュメントで詳しく解説されているので、そちらを参照してください。
https://ja.nuxtjs.org/guide/async-data/

[takochan1192]

markey 様
補足説明していただき誠にありがとうございます。nameもusernameもemailも全部response.dataを参照していたから、うまく取得できなかったんですね。
ご教示いただきました、公式ドキュメントも見ながら勉強致します。
ご丁寧にご回答いただきまして、本当にありがとうございました！！