samplecomponent.vue

<template>
  <DashboardLayout>

    <div class="header">
      <div>
        <div class="title">
          Hours Manager
        </div>
      </div>
    </div>

    <div v-if="!locationsLoadedStatus" class="data-loader-wrapper">
      <i class="fas fa-spinner fa-spin"></i>
    </div>

    <div v-if="getAuthorizedLocations && getAuthorizedLocations.length > 0" class="dashboard-content-wrapper">
      <div class="stat-card-container">
        <DataCard v-for="location in getAuthorizedLocations" :key="location.id" :title="location.name" :dataCount="`<span class='stat-counter-text'> Current hours: </span>`" :route="`/location-hours-manager/${location.id}`" />
      </div>
    </div>

  </DashboardLayout>
</template>

<script>
import axios from 'axios';
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex';

import DashboardLayout from '@/components/layouts/DashboardLayout';
import DataCard from '@/components/cards/DataCard';

export default {
  name: 'HoursManager',

  components: {
    DashboardLayout,
    DataCard
  },

  computed: {
    ...mapGetters([
      'currentUser',
      'currentOrg',
      'getAuthorizedLocations',
      'locationsLoadedStatus'
    ]),
  },

  mounted() {
    this.retrieveAuthorizedLocations();
  },

  methods: {
    ...mapActions([
      'retrieveAuthorizedLocations',
    ]),

  },
};
</script>