gistfile1.txt

<template>
  <div>
    <!-- Main Content -->
    <div class="hk-pg-wrapper">
      <!-- Container -->
      <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">
        <!-- Title -->
        <div class="hk-pg-header">
          <h4 class="hk-pg-title">
            <span class="pg-title-icon">
              <span class="feather-icon">
                <i data-feather="toggle-right"></i>
              </span>
            </span>Listings
          </h4>
        </div>
        <!-- /Title -->

        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">

                <v-server-table url="/get-zipcodes" :columns="columns">
                <template slot="actions" slot-scope="props">
                  <button class="btn btn-sm btn-success" @click="run(props.row.zip)">{{run_button}}</button>
                  <button class="btn btn-sm btn-danger">Delete</button>
                </template>
                </v-server-table>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DatatableFactory from "vuejs-datatable";

import { ServerTable, ClientTable, Event } from "vue-tables-2";

Vue.use(ServerTable, {}, false, "bootstrap4");
Vue.use(DatatableFactory);

export default {
  name: "ZipCodeComponent",
  data() {
            return {
                columns: [
                    'id',
                    'area',
                    'zip',
                    'apify_running',
                    'rapid_running',
                    'created_at',
                    'updated_at',
                    'rapid_updated_at',
                    'actions'
                ],
                options: {
                headings: {
                    id: 'id',
                    area: 'area',
                    zip: 'zip',
                    apify_running: 'Apify Running',
                    rapid_running: 'Rapid Running',
                    created_at: 'Created at',
                    updated_at: 'Updated at',
                    rapid_updated_at: 'Rapid Updated at',
                    actions: 'Actions'
                }
            },
                rows: [],
                page: 1,
                per_page: 10,
                expanded: null,
                run_button: 'Run'
            }
        },
        methods: {
            run(zip) {
                this.run_button = 'Running...';
                axios.get(`/run-zipcode/${zip}`).then(response => {
                    this.run_button = 'Completed';
                    setTimeout(function(){
                        console.log('timed out');
                        this.run_button = 'Run'
                     }, 3000);
                }).catch(error => {

                });
            }
        }
};
</script>