Change v-data-table property-CodePudding

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"
    
    sort-by="publicationDate"
    :sortDesc= "sortVal"
  >
</v-layout>

know how to do that please ?

CodePudding user response：

You can simply achieve it by doing a dynamic binding to loading attribute.

In template :

<v-data-table
  ...
  :loading="loadTable"
>

In script :

data() {
   return {
    loadTable: true
   }
}
mounted() {
  // logic comes here and based on that loadTable boolean value can be assign.
  this.loadTable = false;
}

CodePudding user response：

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>