Example of data loading in an ordered table

OrderedTable.vue

<template>
  <div>
    <md-table v-model="players" :table-header-color="tableHeaderColor">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="Name">{{ item.player }}</md-table-cell>
        <md-table-cell md-label="Completed">{{
          item.mCompleted
        }}</md-table-cell>
        <md-table-cell md-label="Records">{{ item.mRecords }}</md-table-cell>
        <md-table-cell md-label="Points">{{ item.points }}</md-table-cell>
      </md-table-row>
    </md-table>
    <div v-if="loading" class="loading">
      Loading...
    </div>
  </div>
</template>

<script>
import axios from "axios";

axios.defaults.baseURL = "http://localhost:3000";

export default {
  name: "ordered-table",
  props: {
    tableHeaderColor: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      selected: [],
      players: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios
        .get("/players")
        .then(response => {
          this.players = response.data;
          this.loading = false;
        })
        .catch(error => console.log(error));
    }
  }
};
</script>