質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Vue.js

    1116questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Vue CLI

    27questions

  • Vuetify.js

    23questions

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 112

anomer

score 42

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

イメージ説明
イメージ説明
イメージ説明

状況

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • user14

    2019/02/24 18:21

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

    キャンセル

回答 1

checkベストアンサー

0

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

一般に、[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>

補足
公式サイトのData tablesのAPIの真ん中あたりにitemsという項目があり、Typeは配列Arrayで、Defaultは空の配列[]と記載されています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • Vue.js

    1116questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Vue CLI

    27questions

  • Vuetify.js

    23questions