Hello and thank you to those taking the time to read this. I am new to Vue, so I may be overlooking something obvious here, but after being stuck for several days, I am reaching out for help.
In my SFC file, I have an onMounted function fetching data from an API (Spring Boot). The API call is successful as I can see it in the Network tab on Chrome, with the Response containing the necessary data.
Here is my AppLeague.vue file:
<template lang="">
<div class="row">
<div class="col-md-12">
<h3>Leagues</h3>
</div>
<div class="col-md-12">
<ul class="list-group">
<li
v-for="(leagueItem, index) in leagues"
:key="index"
class="list-group-item"
>
{{ index + 1 }}.{{ leagueItem.league_name }}
, Status:
{{ leagueItem.league_status }}, Code: {{ leagueItem.league_code }}
</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import customAxios from "@/lib/customAxios";
interface League {
league_id: number,
league_name: string;
league_code: string;
league_status: string;
}
let leagues: League[];
onMounted(async () => {
await customAxios
.get<League[]>(`account/leagues`, {
withCredentials: true,
})
.then((response) => {
leagues = response.data;
});
});
</script>
My unique axios module:
import axios from "axios";
export const customAxios = axios.create({
baseURL: "http://localhost:8080/api/",
});
customAxios.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401) {
window.location.href = '/';
}
if (error.response) {
alert(error.response.data.message);
}
}
);
export default customAxios;
In Google Chrome's Network tab, I can observe the HTTP 200 code and the Response:
[{"league_id":1,"league_status":"created","league_name":"Test League","league_code":"Test League Code"}]However, when I view the rendered page, the values are not displayed initially. Instead, they appear only after I make a minor change within VSCode and save, triggering a refresh of the page where the values then appear correctly:
If you're curious, take a look at how the page looks after altering the DOM in VSCode here.
I'm seeking a solution to ensure the values are displayed upon page load without needing to manipulate the DOM. It seems that the initial empty values of let leagues: League[]; are causing this issue, requiring a DOM alteration to display the fetched data. Any suggestions on how to force the DOM to show the fetched values directly would be greatly appreciated.
I have scoured for examples involving Vue3 and ., but have come up short. Thank you!