Javascript Vuetify数据表未显示数据
Vuetify数据表未显示数据,显示1行中有1行显示,但表体为空。我的组件代码:Javascript Vuetify数据表未显示数据,javascript,vue.js,vuejs2,vue-component,vuetify.js,Javascript,Vue.js,Vuejs2,Vue Component,Vuetify.js,Vuetify数据表未显示数据,显示1行中有1行显示,但表体为空。我的组件代码: <template> <v-data-table :headers="headers" :items="desserts" > </v-data-table> </template> <script> export default { name: 'Users', data ()
<template>
<v-data-table
:headers="headers"
:items="desserts"
>
</v-data-table>
</template>
<script>
export default {
name: 'Users',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Fat (g)', value: 'fat' },
],
desserts: [
{
name: 'Frozen Yogurt',
fat: 6.0,
},
]
}
}
}
</script>
<style scoped lang="stylus">
</style>
导出默认值{
名称:'用户',
数据(){
返回{
标题:[
{
文字:“甜点(100克),
对齐:“左”,
可排序:false,
值:“名称”
},
{text:'Fat(g'),value:'Fat'},
],
甜点:[
{
名称:“冷冻酸奶”,
脂肪:6.0,
},
]
}
}
}
结果:
您知道如何解决此问题吗?既然您使用的是Vuetify 1.x,您应该添加一个具有作用域插槽的模板:
<v-data-table
:headers="headers"
:items="desserts"
>
<template v-slot:items="props">
<td class="text-xs-right">{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
</template>
</v-data-table>
{{props.item.name}
{{props.item.fat}
或者,您应该升级到2.0版,该版本只需执行以下操作:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
如果您想自定义数据单元格,请检查此在我的情况下,问题是我在
道具部分中放置了标题数组,而不是数据。因此,即使v-datatable
将其items
属性设置为对象数组(可以使用Vue Dev工具、Chrome扩展来确认),它也不会显示任何行
我花了半个小时敲我的头,最后才意识到这个问题。当我将标题
从道具
移动到数据
时,表格开始显示行。希望这对以后的人有所帮助。是的,我们正在查看2.0.0版的文档,您不必在那里添加模板。但我已经安装了1.5.16…嘿,我尝试了你的解决方案,但没有成功。。我的Vue版本是2.5.16,你知道我如何修复它吗?请检查此项,我发现此项无效。发布详细问题并提供链接。请进一步澄清你的问题和解决方案