ki-frontend/src/views/profile/View.vue

<template>
  <div v-if="profile" class="container">
    <h1>{{profile.nickname}}({{profile.pronouns}})</h1>
    <p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
    <p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
    <p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
    <h3>Meine Skills:</h3>
    <profile-list
      :values="profile.skills"
      type="skill"
    ></profile-list>
    <h3>Ich Suche:</h3>
    <profile-list
      :values="profile.searchtopics"
      type="skill"
    ></profile-list>
    <h3>Meine Kontaktmöglichkeiten:</h3>
    <profile-list
      :values="profile.contacts"
      type="contacttype"
    ></profile-list>
    <h3>Ich Spreche Folgende Sprachen:</h3>
    <profile-list
      :values="profile.languages"
      type="language"
    ></profile-list>
    <h3>Meine Location:</h3>
    {{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
  </div>
</template>
<script>
import ProfileList from "@/components/ProfileList";

export default {
  name: "profileView",
  components: {
    ProfileList,
  },
  data() {
    return {
        profile: null
    };
  },
  async created() {
    try {
      const userProfile = await this.axios.get(
        `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
      );
      this.profile = userProfile.data.profile;
    } catch (error) {
      console.error(error);
    }
  },
};
</script>