Being relatively new to the realms of Java/TypeScript, I find myself struggling with a seemingly simple task that has consumed over three days of development time. Despite successful compiling and building processes without errors, I remain perplexed by the issue.
My project involves using vue.js3:
The problematic template looks like this:
<script setup lang="ts">
import type {CompanyPojo} from "@/rest/restapi-companies";
import {createNewCompany} from "@/rest/restapi-companies";
let companyPojo: CompanyPojo;
</script>
<template>
<input id="cName" v-model="companyPojo.name" placeholder="Company Name"/>
<label for="cName">Company Name</label>
// <input id="cAddName" v-model="companyPojo.additionalName" placeholder="Company Additional Name"/>
// <label for="cAddName">Company Additional Name</label>
// <input id="cLegalForm" v-model="companyPojo.legalForm" placeholder="Company Legal Form"/>
// <label for="cLegalForm">Company Legal Form</label>
<button @click="createNewCompany(Object.assign(companyPojo))"> Add Company
</button>
</template>
This is my TypeScript file snippet:
export type CompanyPojo = {
id: number;
name: string;
legalForm: string;
additionalName: string;
};
export type CompanyPojoResponse = {
data: CompanyPojo[];
};
export async function createNewCompany(newCompany: CompanyPojo) {
try {
const {data, status} = await axios.post<CompanyPojoResponse>('http://localhost:9050/api/v1/company/create-new', newCompany,
{
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic XXXXXXXXXXXXXXXXXX',
},
},
);
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);
return error.message;
} else {
console.log('unexpected error: ', error);
return 'An unexpected error occurred';
}
}
}
Upon importing the necessary files, I anticipated having access to all designated types during both development and runtime.
However, upon opening the New-Company View, I encountered an empty view accompanied by the following console error:
TypeError: (intermediate value)(...) is undefined setup http://localhost:9050/assets/CompanyNewView-215ff09f.js:1
Strangely enough, removing the following input elements resolves the issue:
<input id="cName" v-model="companyPojo.name" placeholder="Company Name"/>
<label for="cName">Company Name</label>
This situation is driving me crazy; how can I successfully bind and utilize these values? The reason behind their malfunction remains unknown to me...