Vuetifyの公式ドキュメントのとおりに実装しても意図する結果にならないときはバージョンをちゃんと見ていないという初歩的ミスな可能性が高い

Vuetifyの公式ドキュメントを確認しながらコンポーネント実装していたら思ったように動かないという事象に遭遇しました。 実装方法やプロパティの設定が間違っているのかと試行錯誤していたのですが、結論的には単に公式ドキュメントのバージョンと利用しているバージョンが違っていたことで実装方法そのものが異なっていたという単純ミスでした。

何度やり直してもうまくいかない

VuetifyのDataTableコンポーネントを利用していたときに

• 初期表示件数の実装

• データ行の設定方法が公式ドキュメントのとおりにやっても表示されない

という事象が発生しました。

自分の設定が間違っている、変数指定がおかしい、dataに未定義なものがあるなど試行錯誤を繰り返しましたが、結局うまくいかず・・・。

結局バージョンが違っているだけだった

Vuetifyはまだ触り始めたばかりだったので、そもそも実装に自信がなかったことで自分のやり方を疑ってしまっていたのですが、エラーメッセージをみるとundifinedの文字が・・・。

慣れていなかったということもありますが、結局利用しているバージョンと公式ドキュメントのバージョンが異なっていたことで、そもそもサポートしている記載方法ではないやり方で実装していたというわかれば単純なオチでした。 改めてバージョンごとの違いを眺めてみると結構Vuetifyのバージョンによって実装方法が違っていることがわかりました。

バージョンによる違いの例

例えばDataTableだと以下のように違いがあります。 ※headers, itemsの内容は同じ。

ver2.0.4

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

シンプルです。データ行はpropsで指定して、かつheadersの対象valueとして定義しておけば紐付けをしてくれます。

ver1.5.16

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:items="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
</template>

ver2.0.4より遡るとちょっと面倒が増えます。データ行部分をデータ項目ごとで指定しなければなりません。 また初期表示件数をかんたんに指定するpropsはなく、pagination.syncという別のその他指定も含むpropsで指定する必要があります。

ver1.0.19

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
</template>

ver1.5.16に比べてv-slotがなく、対象のデータ項目定義にslotとslot-scopeを指定する必要があります。 ただこれはVuetifyそのものというよりVue.js側のバージョンの関係でv-slot未対応ということによる影響です。 ver1.x.xからver2.x.xはやはり大きな違いがあるのが改めて比較するとわかります。今から新規に作るならver2.x.xの方がコード量が少なく済むのでよいなーと思いますね。

まとめ

バージョン確認ができていなかったという単純なミスでしたが、慣れないと気づくまでに時間がかかりました。 あまりに公式ドキュメントの方法でうまくいかない時は一度package.jsonやnpmコマンドでパッケージのバージョン確認をしてみるとかんたんに解決するかもしれません。