I attempt to fetch and display username from my API. However user.username
couldn’t be accessed normal way:
<script setup>
definePageMeta({
layout: "dashboard",
});
const token = useCookie("token");
const { data: user } = await useFetch("http://127.0.0.1:8000/auth/", {
onRequest({ options }) {
options.headers = options.headers || {};
options.headers.authorization = `Bearer ${token.value}`;
},
});
console.log(user);
</script>
<template>
<div class="flex flex-col items-center">
<div class="absolute top-1/4 flex flex-col items-center">
<p class="special-font text-7xl rounded-sm px-7 gradient-red">
{{ user.username }}
</p>
</div>
</div>
</template>
I found a weird workaround, but it’s counterintuitive (iterating through array of 1 element does the job)
<template>
<div class="flex flex-col items-center">
<div class="absolute top-1/4 flex flex-col items-center">
<p
class="special-font text-7xl rounded-sm px-7 gradient-red"
v-for="user in user"
>
{{ user.username }}!
</p>
</div>
</div>
</template>