For a recent project at my company, I integrated nuxt.js. To make testing easier, I decided to sign up for Codepen Pro.
I wanted to display v-data-table components in Codepen, but encountered some issues.
The code I used was based on the Vuetify website. In my Codepen setup, I selected Typescript, Vue, and Vuetify before saving.
I tried searching for others attempting the same components, but didn't find anyone.....
Is there a specific way to write Vuetify code in Codepen?
Below is my code↓
html
<div id=app>
<template>
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
</div>
Typescript
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%"
}
];
})