Profile.vue

<template>
  <div id="page-content-wrapper" class="main">
    <fetch-profile v-if="userData !== null">
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading || response === null"></div>
          <div v-else>
<!--            {{response}}-->

            <h4 class="round">User Profile</h4>
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="container-fluid col-md-12">
                  <div class="row">
                    <div class="text col-sm-3">User Name</div>
                    <div class="col-sm-9">
                      <b>{{response.username}}</b>
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Email</div>
                    <div class="col-sm-9">
                      {{response.email}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Role</div>
                    <div class="col-sm-9">
                      {{response.role.name}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Affiliation</div>
                    <div class="col-sm-9">
                      {{response.Affiliation}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Link</div>
                    <div class="col-sm-9">
                      {{response.ProfileLink}}
                    </div>
                  </div>

                  <div class="row">
                    <div class="text col-sm-3">Joined</div>
                    <div class="col-sm-9">
                      {{response.createdAt}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Updated</div>
                    <div class="col-sm-9">
                      {{response.updatedAt}}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <h4 class="round">Update Items</h4>
            <div class="panel panel-default">
              Table
            </div>
          </div>
        </slot>
      </template>
    </fetch-profile>

    <fetch-update-items v-if="userData !== null">
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading || response === null"></div>
          <div v-else>
            {{response}}
          </div>
        </slot>
      </template>
    </fetch-update-items>
  </div>
</template>

<script>
import FetchProfile from "@/components/CMS/fetchProfile";
import FetchUpdateItems from "@/components/CMS/fetchUpdateItems";

const _ = require('lodash')

export default {
  name: 'ProfilePage',
  components: {
    FetchProfile, FetchUpdateItems
  },
  props: {
    msg: String
  },
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    userData: function () {
      return this.$store.getters['User/userData']
    },
  },
  methods: {
  },
  mounted: function () {
    const vm = this
    if(vm.userData === null) {
      this.$router.push('/login')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

.panel {
  font-size: 1.2rem;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

</style>