chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

<template>
   
   <ul class="nav nav-tabs">
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyCustoms'}"
            @load="selectTab('MyCustoms')" @click="selectTab('MyCustoms')">
            <i class="fa fa-home"></i>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyWorks'}"
            @click="selectTab('MyWorks')">
            {{ $t('my_works') }}
            <!-- <span class="badge rounded-pill bg-danger counter">2</span> -->
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyEvaluations'}"
            @click="selectTab('MyEvaluations')">
            {{ $t('my_evaluations') }}
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyTasks'}"
            @click="selectTab('MyTasks')">
            {{ $t('my_task') }}
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyAccompanyingCourses'}"
            @click="selectTab('MyAccompanyingCourses')">
            {{ $t('my_accompanying_courses') }}
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyNotifications'}"
            @click="selectTab('MyNotifications')">
            {{ $t('my_notifications') }}
         </a>
      </li>
      <li class="nav-item loading ms-auto py-2" v-if="loading">
         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
      </li>
   </ul>
   
   <div class="my-4">
      <my-customs
         v-if="activeTab === 'MyCustoms'">
      </my-customs>
      <my-works
         v-else-if="activeTab === 'MyWorks'">
      </my-works>
      <my-evaluations
         v-else-if="activeTab === 'MyEvaluations'">
      </my-evaluations>
      <my-tasks
         v-else-if="activeTab === 'MyTasks'">
      </my-tasks>
      <my-accompanying-courses
         v-else-if="activeTab === 'MyAccompanyingCourses'">
      </my-accompanying-courses>
      <my-notifications
         v-else-if="activeTab === 'MyNotifications'">
      </my-notifications>
   </div>
</template>

<script>
import MyCustoms from './MyCustoms';
import MyWorks from './MyWorks';
import MyEvaluations from './MyEvaluations';
import MyTasks from './MyTasks';
import MyAccompanyingCourses from './MyAccompanyingCourses';
import MyNotifications from './MyNotifications';
import { mapState, mapGetters } from "vuex";

export default {
   name: "App",
   components: {
      MyCustoms,
      MyWorks,
      MyEvaluations,
      MyTasks,
      MyAccompanyingCourses,
      MyNotifications,
   },
   data() {
      return {
         activeTab: 'MyCustoms'
      }
   },
   computed: {
      ...mapState([
         'loading',
      ]),
      ...mapGetters([
      ])
   },
   methods: {
      selectTab(tab) {
         this.activeTab = tab;
         this.$store.dispatch('getByTab', tab);
      }
   }
}
</script>

<style scoped>
a.nav-link {
   cursor: pointer;
}
</style>