Situation: I am working on a webpage that dynamically displays different div elements based on the response received from an Axios request. If the response does not populate the data array called myExpense[], a div with the alert-warning class is shown. Otherwise, if the response does populate the array, a div with the alert-success class is displayed. Below is the code snippet:
<template>
<div class="profilePage">
<div class="container">
<div class="row">
<div class="col" v-if="Array.isArray(myExpense)
&& myExpense == 0"><!--Warning div-->
<p class="alert alert-warning">You do not have a budget at the moment</p>
<router-link to="/budgetform" tag="button" class="btn btn-primary mt-5">Create Budget</router-link>
</div>
<div v-else class="col-md-12 alert alert-success"><!--Success div-->
<p class="yourBalance">
Your monthly balance
<br />
<span>${{myExpense[0].earnings}}</span>
</p>
<router-link to="/mybudget" tag="button" class="btn btn-primary mt-5">My budget</router-link>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="http://localhost:3000/auth/logout" class="btn btn-primary">Logout</a>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "userProfile",
data() {
return {
myExpense: [],//This array to be populated by axios response
};
},
methods: {},
created() {
axios
.get("http://localhost:3000/budget", {
headers: { "Content-Type": "application/json" },
withCredentials: true
})
.then(res => {
if (res.data.name == undefined) {
this.$router.push("/");
}
this.profile = res.data;
this.myExpense = res.data.budget;
});
}
};
</script>
Issue:
Upon rendering this page, there is a flicker of the wrong div before displaying the correct one based on the condition. Additionally, there are instances of white space being displayed.
Even after adding v-cloak, the problem persists.
Appreciate any assistance provided