<template v-if="customers != null && customers.length > 0">
<v-data-table
class="mb-4"
:headers="customerHeaders"
:items="customers"
:items-per-page="15"
:loading = loader
>
<template v-slot:no-data>
<p>The Table is Empty. Please insert data with the above Button.</p>
</template>
</v-data-table>
</template>
While table is empty v-slot:no-data is not showing his message.
What is the problem?
There is no ERROR!
VUETIFY!
This is the example I can find in the documentation. It seems you're on the right way here
<template v-if="isEnabled('no-data')" v-slot:no-data>
NO DATA HERE!
</template>
Documentation: https://vuetifyjs.com/en/components/data-tables/#slots
But I don't know why my Table Header is absent and The message of NO Data is.
While NO DATA. There is no HEADER and Message also.
<v-data-table
class="elevation-1"
:headers="customerHeaders"
:items="customers"
:footer-props="{
'items-per-page-options': [5, 10, 20, 25, 30, 40, 50, 100, -1]
}"
:items-per-page="25"
:loading = loader
>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
Data Properties:
customerHeaders: [
{
text: 'Customer Name',
value: 'customer_name',
},
{ text: 'Company Name', value: 'company_name' },
{ text: 'Address', value: 'address' },
{ text: 'Email', value: 'email' },
{ text: 'Phone', value: 'phone' },
{ text: 'Actions', value: 'actions' },
],
customers: []
Strange Problem!!!
Please or to participate in this conversation.