Codepen でVuetifyのデータテーブルを表示させたい。言語はTypescript を使用しております。

Question

プロジェクトでnuxt.jsを使用しているのですが、簡単にコードのテストなどを行いたいと思い、codepenを使い始めました。
Vuetify を使用するには、proへの登録が必要ということで、早速proに登録したはいいものの、
書いたコードを表示させることができません。

コードは非常に基本的なvuetifyのデータテーブルを表示させるようコードです。
Codepen内の他の方のコードを参考にしてみましたが、表示ができません。
また、Codepenのjsでvuetify,vue,typescriptをsaveしております。

折角、proに登録したので、英語は苦手ですが、なんとか使いこなしたいと思っております。
どなたかご教示いただけないでしょうか？

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

new Vue ({
  el=#app
  headers = [
    {
      text: "Dessert (100g serving)",
      align: "start",
      sortable: false,
      value: "name"
    },
    { text: "Calories", value: "calories" },
    { text: "Fat (g)", value: "fat" },
    { text: "Carbs (g)", value: "carbs" },
    { text: "Protein (g)", value: "protein" },
    { text: "Iron (%)", value: "iron" }
  ];
  desserts = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: "1%"
    }
  ];
})

Answer 1

JSコードに誤りを見つけましたので、修正してみました。
https://codepen.io/yuhigash/pen/bGpBpxR

簡単に誤っている点を指摘いたします。
Vueコンストラクタには、ハッシュ (連想配列) 型の値を渡します。今回は、以下のプロパティをもつハッシュを指定する必要があります。

• el
• data
• vuetify

質問者様の場合、
① Vueコンストラクタにハッシュ型ではない値を指定していた
② data属性の外でheaders、desserts属性を定義していたため、正しく変数定義がなされていなかった
③ vuetify属性にnew Vuetify()を指定していなかった
の3つの問題がありました。詳しくはcodepenをご参照ください。

Comments

[takochan1192]

ご回答いただきまして、誠にありがとうございます。
詳しい理由までご教示いただきまして本当にありがとうございます。
動作確認させていただきました。