Fix profile image handling and data flow

The commit improves image handling by removing the separate imagenVista
ref, using data.image directly, and properly refreshing session data
after image upload. Also adds v-if guard for data availability.
This commit is contained in:
2025-08-14 09:11:45 +02:00
parent 29aef78804
commit 3b2198598e

View File

@@ -1,5 +1,6 @@
<template>
<v-container
v-if="data"
class="fill-height d-flex align-center justify-center text-center"
>
<div class="full-height flex-column mr-5">
@@ -8,7 +9,7 @@
:width="200"
aspect-ratio="16/9"
cover
:src="imagenVista"
:src="data.image"
:alt="data.name"
></v-img>
</v-avatar>
@@ -29,7 +30,7 @@
</div>
<div class="full-height flex-column">
<h3>Último login:</h3>
<p>{{ data?.last_login ? data.last_login : "Nunca" }}</p>
<p>{{ data.last_login ? data.last_login : "Nunca" }}</p>
<h3>Username:</h3>
<p>{{ data.username }}</p>
<h3>Nombre:</h3>
@@ -51,7 +52,7 @@
definePageMeta({
auth: true,
});
const { data, token } = useAuth();
const { data, token, getSession } = useAuth();
import { ref, onMounted } from "vue";
import { useSystemStore } from "~/stores/system";
import { useListasStore } from "~/stores/listas";
@@ -59,7 +60,6 @@ const listasStore = useListasStore();
const systemStore = useSystemStore();
const { handleFileInput, files } = useFileStorage();
let imagen = ref([]);
let imagenVista = ref("");
const uploadImage = async () => {
const url = "http://" + systemStore.url_backend + "/auth/users/me/";
@@ -71,21 +71,21 @@ const uploadImage = async () => {
formData.append("last_name", data.value.last_name);
formData.append("image", imagen.value ? imagen.value : null);
await $fetch(url, {
const response = await $fetch(url, {
headers: {
Authorization: `${token.value}`,
},
method: "PUT",
body: formData,
})
.then((response) => {
imagenVista.value = response.image;
files.value.pop();
imagen.value = null;
})
.catch((e) => {
console.error(e);
});
});
if (response) {
//imagenVista.value = response.image;
files.value.pop();
imagen.value = null;
await getSession();
} else {
console.error(response);
}
};
const validateFileType = () => {
@@ -117,10 +117,5 @@ const openImageDialog = () => {
onMounted(async () => {
await listasStore.getData();
if (data) {
console.log(data.value.image);
imagenVista.value = data.value.image;
}
});
</script>