no-data section loads first and then shows the data in v-data-table

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>

Answer

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>

Advertisement

Answer