Profil ansehen Technisch Abgeschlossen

src/views/profile/Edit.vue

@@ -101,7 +101,7 @@
 
       <div class="row">
         <div class="col">
-          <label for="pzl" class="form-label fw-bold">PZL</label>
+          <label for="pzl" class="form-label fw-bold">PLZ</label>
           <input
             type="text"
             class="form-control"
@@ -150,6 +150,7 @@
 <script>
 import axios from "axios";
 import AutoComplete from "@/components/AutoComplete";
+
 export default {
   name: "profileEdit",
   components: {

src/views/profile/View.vue

@@ -1,11 +1,59 @@
 <template>
-    <div class="container">
-        <h1>Profil Ansehen</h1>
-        
-    </div>
+  <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'
-}
+  name: "profileView",
+  components: {
+    ProfileList,
+  },
+  data() {
+    return {
+        profile: null
+    };
+  },
+  async created() {
+      console.log(this.$route.params.memberId)
+    try {
+      const userProfile = await this.axios.get(
+        `${process.env.VUE_APP_API_URL}/users/${this.$route.params.memberId}/profile`,
+        {
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        }
+      );
+      this.profile = userProfile.data.profile;
+    } catch (error) {
+      console.error(error);
+    }
+  },
+};
 </script>