v-data-table - add button for each row with loading

[Costas]

​

each row has a button

v-btn has loading property by default - https://vuetifyjs.com/en/components/buttons/#loaders

what we need, is when user clicks the button to turn the button loading property to true.


button column get appear with a slot :

    <v-data-table
      :headers="headers"
      :items="records"
      :options.sync="options"
      :server-items-length="totalRecords"
      :loading="loading"
      :search="search"
      disable-pagination
      hide-default-footer
      item-key="id"
      class="elevation-1"
      @dblclick:row="editRowCron_jobs">
    
      <template v-slot:[`item.actions`]="props">
        <v-btn color="blue-grey" :loading="props.item.inprogress" fab dark small @click="ManuralRun(props.item)">
          <v-icon dark>mdi-google-play</v-icon>
        </v-btn>
      </template>
    
    </v-data-table>

the property inprogress does not exist to the incoming JSON, by API, so using this technic

export default {
  components: {Cron_jobsDetail},
  data() {
    return {
      records: [],
      headers: [
        { text: "id", value: "id", align: " d-none" },
        { text: "entity", value: "entity" },
        { text: "active", value: "active" },
        { text: "next_run", value: "next_run" },
        { text: "priority", value: "priority" },
        { text: "php_interval", value: "php_interval" },
        { text: "actions", value: "actions" },
      ],
    },
    methods: {
        this.ApiFillGridCron_jobs().then((data) => {
                this.loading = false;
  
                if (!data)
                  return;
  
                //the actual dbase recordset rows on table
                this.records = data.data.map(record => {
                            return {
                                inprogress: false,   //THIS MUST BE SET TO THE ARRAY otherwise not working!!
                                ...record
                            }
                        })
  
                //grid wants to know the total records
                this.totalRecords = data.total;
  
                //label total records
                this.recordsinfo =  data.total;
            });
        },
         ManuralRun(item){
           item.inprogress = true;
        },
   ]

now when user clicking the button the inprogress turned to true

ref
https://stackoverflow.com/a/57803765
https://stackoverflow.com/a/57162576