質問: ソースとエラーメッセージ ------------ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/880c02cfda6c4558f5ca29021ba5603b.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/92d7bb397470a12966013eb248277b0f.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b17bf824694cf41f4fc3f9c5c5017e36.png) 状況 -- v-forでは問題なくtableで出力することに成功しましたが vuetifyのv-data-tableではうまく出力できません。 公式をみながら実装しましたが、よくわかりませんでした
回答: 出力されているエラーは、プロパティバインディングで渡された値の型が、プロパティが期待する型と一致しない場合に表示されるものです。 一般に、`[Vue warn] Invalid prop: type check failed for "プロパティ名", Expected 期待している型名, got 実際に渡された型名`というフォーマットで書かれています。 今回のエラーでは、`[Vue warn] Invalid prop: type check failed for "items". Expected Array, got Object`とありますので、「`items`には配列を渡して欲しいのに、オブジェクトが渡されたよ!」ということです。実際に、anomerさんが渡しているのは、`json_data`(`{}`)というオブジェクトですね。 今回の場合、以下の方法で解決可能です。 **(1)HTTP通信して返却される内容を変更できる場合** anomerさんが`axios.get(url)`のアクセス先が返す内容をあらかじめ配列にできるのであれば、フロンドエンドのソースコード変更は必要ありません。 **(2)HTTP通信して返却される内容を変更できない場合** anomerさんが`axios.get(url)`のアクセス先が返す内容をあらかじめ配列にできないのであれば、フロンドエンドのソースコード変更が必要になります。 オブジェクトの中身がわからないので、「正解」は書けませんが、おおよそ以下のようなコードになると思います。(画像を見る限り、vue-cliかNuxt.jsなどを使っていると思うので、JavaScriptもいくらかモダンな書き方にしておきます。) ``` ``` **補足** 公式サイトのData tablesのAPIの真ん中あたりに`items`という項目があり、Typeは配列`Array`で、Defaultは空の配列`[]`と記載されています。