Estoy usando vuetify v-data-table para mostrar datos. El problema al que me enfrento aquí es que el mensaje Sin configuración todavía siempre se muestra durante 1 segundo y luego muestra los datos. Es como si ningún mensaje de datos se carga primero y luego aparecen los datos reales. ¿Hay alguna manera de arreglar esto?
<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>Desde el punto de vista de v-data-table en su caso, solo hay 2 estados: los datos están presentes o no (todavía). Es por eso que la ranura no-data siempre está visible al cargar.
Si desea mostrar el mensaje "Cargando" y la alerta "Todavía no hay configuraciones" en este espacio, puede hacerlo de esta manera:
<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> Consulte este patio de recreo de CodePen para una mejor comprensión. Allí también podrá comprender la diferencia entre las tragamonedas no-data y no-results .
Creo que puede hacer esto agregando la directiva v-if en la ranura sin datos como el siguiente ejemplo
<template slot="no-data" v-if="!isLoading"> <v-alert id='no-data' :value="true" color="error" icon="warning"> No Settings Yet </v-alert> </template>