vuetifyのv-data-tableがうごかない

ソースとエラーメッセージ

状況

v-forでは問題なくtableで出力することに成功しましたが
vuetifyのv-data-tableではうまく出力できません。
公式をみながら実装しましたが、よくわかりませんでした

user14

2019/02/24 09:21

コードはスクショではなく<code>にコピペしたほうが回答が得られやすいと思いますよ

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

回答1件

ベストアンサー

出力されているエラーは、プロパティバインディングで渡された値の型が、プロパティが期待する型と一致しない場合に表示されるものです。

一般に、[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もいくらかモダンな書き方にしておきます。）

<template>

<!-- 省略 -->

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

<!-- 省略 -->

</template>

<script>

// 省略

data () {
  return {
    // 省略
    items: [] // ←初期値も配列にしておいた方が理解しやすいです。型に一貫性がでるので。
  }
}

created () {
  axios.get(url).then((res) => {
    /**
     * `red.data`が以下のようなJSONデータであることを想定しています。
     *
     * {
     *   "data1": {
     *     "name": "XXX",
     *     "event_title": "YYY",
     *     // 省略
     *   },
     *   "data2": {
     *     "name": "YYY",
     *     // 省略
     *   }
     * }
     */

    const items = [];


    // オブジェクトの値を配列として取得
    // `values`は`[ data1のオブジェクト, data2のオブジェクト ]`という配列になっている
    const values = Object.values(res.data) 
    
    // `forEach()`でひとつずつ処理していく
    values.forEach((value) => {
      const item = {
        name: value.name,
        event_title: value.event_title,
        event_place: value.xxx,
        // 以下同様
　　　　　capacity: value.capacity
      };

      // `items`の一番後ろに追加
      items.push(item)
    });

    // コンポーネントのデータに代入
    this.items = items;
  });
}

// 省略

</script>