如何解决如何使用Typescript在Codepen中制作Vuetify组件?
我在公司项目中使用了nuxt.js
。我真的很想轻松测试
所以我决定注册Codepen Pro
。
我只想在Codepen中显示v-data-table
组件,但这没有用。
我的代码刚刚指向Vuetify
网站。我在代码笔中选择了Typescript
,Vue
和Vuetify
并保存。
我一直在寻找试图制造相同组件的人,但我找不到.....
有人知道如何在Codepen中编写Vuetify
代码吗?
我的代码在下面↓
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%"
}
];
})
解决方法
您的代码存在一些问题。 首先,您应该返回以下数据:
new Vue({
el: '#app',data () {
return {
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%"
}
]
}
}
});
第二,为了使用Vuetify,您需要在内容周围使用<v-app>
包装。
因此,您的html应该看起来像这样:
<div id="app">
<v-app>
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
</v-app>
</div>
以下是我发现的使用vuetify的一个Codepen示例:https://codepen.io/charlesok/pen/yqmEXE
请注意,他还为Vue,Vuetify和babel-polyfill添加了多个CDN,以便正确显示Vue和Vuetify。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。