Vue PR

UserProfile.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const user = ref(null);
+const editMode = ref(false);
+const name = ref('');
+const saving = ref(false);
+
+const fetchUser = () => {
+  fetch(`/api/users/${props.userId}`)
+    .then((res) => res.json())
+    .then((data) => {
+      user.value = data;
+      name.value = data.name;
+    });
+};
+
+const handleSave = () => {
+  saving.value = true;
+  fetch(`/api/users/${props.userId}`, {
+    method: 'POST',
+    body: JSON.stringify({ name: name.value }),
+    headers: { 'Content-Type': 'application/json' },
+  })
+    .then(() => {
+      user.value.name = name.value;
+      editMode.value = false;
+    })
+    .finally(() => (saving.value = false));
+};
+
+onMounted(() => {
+  fetchUser();
+});
+
+watch(() => props.userId, fetchUser);
+</script>
+
+<template>
+  <div style="border: 1px solid gray; padding: 20px">
+    <h2>User Profile</h2>
+    <div v-if="editMode">
+      <input v-model="name" />
+      <button @click="handleSave" :disabled="saving">
+        {{ saving ? 'Saving...' : 'Save' }}
+      </button>
+    </div>
+    <div v-else>
+      <p>Name: {{ user.name }}</p>
+      <button @click="editMode = true">Edit</button>
+    </div>
+  </div>
+</template>