javascript - 模板 V 型槽内在 vue 2.0.15 中不起作用
问题描述
我试图创建一个 v-data-table 包括这样我可以使用按钮添加另一个字段,但它似乎不起作用。
这是代码: https ://codepen.io/gerak/pen/yLBpqqG
问题是当我将包https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js更改为像这样的最新版本: https://cdnjs.cloudflare。 com/ajax/libs/vuetify/2.0.15/vuetify.min.js表忽略标签。
HTML
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td >{{ props.item.calories }}</td>
<td>{{ props.item.fat }}</td>
<td><v-btn>Created Button</v-btn></td>
</template>
</v-data-table>
</v-app>
</div>
JS
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Button field', value: 'buttonField' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
}
]
}
}
})
我没有收到任何错误,只有表格停止出现。会不会是版本问题?
解决方案
插槽的工作方式不同,每个字段都有模板,要在表格中添加按钮,您可以这样做(https://codepen.io/reijnemans/pen/dybJgjL?editors=1010):
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.action="{ item }">
<v-btn>Created Button</v-btn>
</template>
</v-data-table>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Actions', value: 'action', sortable: false }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
}
]
}
}
})
推荐阅读
- python - 如何删除变量的最后一个字符,直到python中只剩下一个
- r - 如何在闪亮的情况下改变绘图的背景颜色?
- sql - SQL oracle - 如何从列中获取最大值,添加一个,格式化它并与更多值连接
- netsuite - NETSUITE - 自定义搜索 - 标准
- azure - Azure 数据工厂错误 - 字符串或二进制数据将被截断
- amazon-web-services - 拆分文件 - Redshift 复制命令
- android - 我已将数据从 firestore 加载到 Searchable Spinner 但过滤 searchablespinner 的结果会使我的应用程序崩溃
- javascript - Reveal.js幻灯片中的Jquery UI可拖动定位问题
- angular - 为什么此按钮单击 Angular 单元测试不起作用?
- python - 为什么验证准确度显着高于从相同分布中提取的不同集合上的预测标签的准确度