Таблица данных Vuetify не отображает данные
Таблица данных Vuetify не отображает данные, она показывает, что отображается 1 строка из 1, но тело таблицы пусто. Код моего компонента:
<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>
Результат:
Есть идеи, как это исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы используете 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>
или вам следует перейти на версию 2.0, которая просто:
<template>
<v-data-table
:headers = "headers"
:items = "desserts"
:items-per-page = "5"
class = "elevation-1"
></v-data-table>
</template>
если вы хотите настроить свои ячейки данных, проверьте этот answer
Эй, я попробовал ваше решение, но оно не сработало. Моя версия Vue — 2.5.16. У вас есть идеи, как я могу это исправить?
Пожалуйста, проверьте этот отвечать, это не работает, опубликуйте подробный вопрос и дайте ссылку
В моем случае проблема заключалась в том, что я поместил массив headers в раздел props вместо data. Таким образом, даже когда свойство v-datatable было установлено на массив объектов (что можно подтвердить с помощью Vue Dev Tools; расширение Chrome), оно не отображало никаких строк.
Я полчаса бился головой, только чтобы наконец осознать эту проблему. Как только я переместил items с headers на props, в таблице начали отображаться строки. Надеюсь, это поможет кому-то в будущем.
пожалуйста, уточните больше вашу проблему и решение
Ага, смотрел документацию по версии 2.0.0, туда шаблон добавлять не надо. Но у меня установлена 1.5.16...