vue.jsvuetify.jsv-data-table

Change v-data-table property


I have a v-data-table and I'd like to make a method to change the attribute "loading" to false in a method. Does anyone

 <v-layout fluid v-resize="onResize" child-flex>
  <v-data-table
    loading=""
    loading-text=""
    :footer-props="{ 'items-per-page-options': [50, 100, 250, -1] }"
    dense
    dark
    fixed-header
    calculate-widths
    :height="windowSize.y - 63 - 60"
    :headers="headers"
    :items="res"
    class="elevation-1"
    sort-by="publicationDate"
    :sortDesc= "sortVal"
  >
</v-layout>

know how to do that please ?


Solution

  • You can try this approach as well

        <template>
    <!--
        Bind the loading prop with the value declared on the data block
    -->
        <v-data-table 
        ...
        :loading="loadingValue">
        ...
        </v-data-table>
    
    </template>
    
    <script>
    export default {
        data: () => ({
            //initially set the loader value to false
            loadingValue:false
        }),
    
        methods:{
            //you can control your loading value in any function within this method block
    
           getSomeDataTableInfo() {
                /*If you will call this method many times you can reset the loading value to true
                after completing your process you can set it back to false
                */
               /*
                Let us assume you have an async function which fetches data and returns a response
                */
    
                this.loadingValue = true;
    
                await myFunction.then((response)=>{
                /**
                 * DO SOMETHING HERE 
                 */
                }).catch((someErrors)=>{
                /**
                 * DO SOMETHING HERE 
                 */
                }).finally(()=>{
                    this.loadingValue = false;
                })
            }
        }
    
    }
    </script>
    
    <style>
    </style>