On my Vue.JS web page, I am making an API call using the Http GET method. Currently, the table header is displayed before receiving the API response, which doesn't look good. Can someone help me modify my code so that the table header is only displayed after the server response is received? Thank you in advance.
PackageInfo.vue
<template>
<h3> Package List </h3>;
<div>
<br> <br> <br>
<button @click="fetchPackageIDs"> Get Package IDs </button>
<br> <br>
<table class="table-bordered table-hover table-sm" align="center"gt;
<thead v-if="posts.packageIDs.length > 0" class="thead-light">
<tr scope="row" align="center">
<th> Package IDs </th>
<th> Package Type </th>
<th> State </th>
<th> Sub State </th>
</tr>
</thead>
<tbody>
<tr v-for="(user) in posts.packageIDs" :key="user.packageId" align="center" scope="row">
<td>{{ user.packageId }}</td>
<td>{{ user.packageType }}</td>
<td>{{ user.state }}</td>
<td>{{ user.subState }}</td>
</tr>
</tbody>
</table>
<br><br><br>
</div>
</template>
<script>
import { apiHost } from '../config';
import axios from 'axios';
export default {
name: "PackageInfo",
data() {
return {
posts: {
packageIDs: []
}
}
},
methods: {
fetchPackageIDs(e) {
const url = apiHost + 'tdg/packageIds/' + localStorage.getItem('userId');
console.log(url);
e.preventDefault();
axios.get(url, null, null)
.then(response => this.posts.packageIDs = response.data)
.catch(error => {
console.log(error);
})
console.log(this.posts.packageIDs);
},
}
}
</script>
<style >
.form-control:focus{
border-color:#167bff;
box-shadow:none;
}
.auth-inner{
width:450px;
margin:auto;
background:#ffffff;
box-shadow:0px 14px 80px rgba (34,35,58,0.2);
padding:40px 55px 45px 55px;
border-radius:15px;
transition:all .3s;
}
table.table-bordered{
border:1px solid black;
margin-top:20px;
}
table.table-bordered > thead > tr > th{
border:1px solid black;
padding:7px 30px;
}
table.table-bordered > tbody > tr > td{
border:1px solid black;
padding:7px 30px;
}
</style>