After conducting my research, it appears that I have followed all the correct steps. However, I am unable to identify why my table is not updating.
Initially, I create a new company and proceed to the overview, but nothing is being displayed. While checking the logs, I can see all the companies that have been created, yet none of them are rendering.
In the web browser console, I can see data being logged from the restapi-companies.
When fetching these companies, everything seems to be working fine.
Do I need to trigger a specific event or is there an underlying issue that needs to be addressed?
Below is the full development code:
- restapi-companies.ts:
export type CompanyPojo = {
id: number;
name: string;
legalForm: string;
additionalName: string;
};
export type CompanyPojoResponse = {
data: CompanyPojo[];
};
import axios from "axios";
export async function findAllCompanies() {
try {
const { data, status } = await axios.get<CompanyPojoResponse>(
"http://localhost:9050/api/v1/company/all",
{
headers: {
"Content-Type": "application/json",
Authorization: "Basic YWRtaW46YWRtaW5QYXNz",
},
}
);
console.log(JSON.stringify(data, null, 4));
// ?? "response status is: 200"
console.log("response status is: ", status);
return data;
} catch (error) {
if (axios.isAxiosError(error)) {
console.log("error message: ", error.message);
console.log("error message: ", error);
} else {
console.log("unexpected error: ", error);
}
}
return <CompanyPojoResponse>{};
}
- Vue-Template
<script>
import { findAllCompanies } from "@/rest/restapi-companies"
import { ref } from "vue"
export default {
data() {
return {
companies: ref([])
}
},
mounted() {
findAllCompanies().then((response) => {
this.companies = response.data
})
}
}
</script>
<template>
<div class="top-nav">
<nav>
<RouterLink to="/new-company">New Company</RouterLink>
<!-- view product list -->
<!-- create new product -->
</nav>
</div>
<table id="companyTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Additional Name</th>
<th>Legal Form</th>
</tr>
</thead>
<tbody>
<tr v-for="company in companies">
<td>{{ company.id }}</td>
<td>{{ company.name }}</td>
<td>{{ company.additionalName }}</td>
<td>{{ company.legalForm }}</td>
</tr>
</tbody>
</table>
</template>