I am using vuetify v-data-table to display data. The issue I am facing here is No Settings Yet message always shows for like 1 second and then displays the data. Its like no data message loads first and then the actual data shows up. Is there a way to fix this.
<template>
<div>
<v-card>
<v-data-table
:headers="headers"
:items="settings"
hide-default-footer
disable-pagination
:mobile-breakpoint="0">
<template slot="top" v-if="isLoading">
<v-progress-linear
indeterminate
color="red"
></v-progress-linear>
</template>
<template slot="item" slot-scope="props">
<tr>
<td>{{ props.item.name }}</td>
<td>{{ props.item.value }}</td>
</tr>
</template>
<template slot="no-data" >
<v-alert id='no-data' :value="true" color="error" icon="warning">
No Settings Yet
</v-alert>
</template>
</v-data-table>
</v-card>
</div>
</template>
<script>
export default {
data: function() {
return {
settings: [],
headers: [
{ text: 'Name', value: 'name'},
{ text: 'Value', value: 'value'},
{ text: 'Actions', sortable: false}
],
isLoading: false
}
},
created() {
this.fetchSettings();
},
methods: {
fetchSettings() {
var that = this;
that.isLoading = true;
this.$axios.get('/settings.json')
.then(response => {
that.settings = response.data;
that.isLoading = false;
});
}
}
}
</script>
From the v-data-table's point of view in your case there are only 2 states: data is present or not (yet). That's why no-data slot is always visible on loading.
If you want to show both "Loading" message and "No settings yet" alert in this slot, you can do it this way:
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
hide-default-footer
disable-pagination
:mobile-breakpoint="0"
>
<template #top>
<v-progress-linear
v-show="isLoading"
indeterminate
color="red"
/>
</template>
<template #no-data>
<v-alert v-show="!isLoading" :value="true" color="error" icon="warning">
No Settings Yet
</v-alert>
<span v-show="isLoading">Loading...</span>
</template>
</v-data-table>
Check this CodePen playground for a better understanding. There you'll also be able to understand the difference between no-data and no-results slots.
I think you can do this by adding v-if directive in no-data slot like below example
<template slot="no-data" v-if="!isLoading">
<v-alert id='no-data' :value="true" color="error"
icon="warning">
No Settings Yet
</v-alert>
</template>