英文:
Type error in Type-Script with Vue.js and Databinding
问题
对不起，你的要求是只返回翻译好的部分，不包括代码。以下是你的原文的翻译：
我在Java/TypeScript领域相对陌生...
我想执行一个简单的任务，目前已经花了我三天以上的开发时间。我甚至不确定为什么会出现这种情况，因为编译和构建都没有出现错误。
我正在使用vue.js 3：
模板中的错误：
<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>
这是我的TypeScript文件：
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';
}
}
}
当我导入这些导出的文件时，我期望所有这些类型都会可用（在开发和启动时确实是如此）。
但是，当我打开New-Company View时，视图为空，我在控制台中看到这个错误：
TypeError: (intermediate value)(...) is undefined
setup http://localhost:9050/assets/CompanyNewView-215ff09f.js:1
删除以下部分：
<input id="cName" v-model="companyPojo.name" placeholder="Company Name"/>
<label for="cName">Company Name</label>
解决了这个问题。这真的让我抓狂，我怎么能绑定和使用这些值呢？
我甚至不知道为什么这根本不起作用...
英文:
i am pretty fresh in the world of java/type script....
I want to perform a simple task, which currently costs me more than three days in development. I am even not sure why this does happen, since compiling and building are running without an error.
I am using vue.js3:
The Template with error:
<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>
and this is my TypeScript-File:
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';
}
}
}
As i imported the exported files, i expected that all those types would be availble (which there are in dev and start time).
But then, simply when opening the New-Company View, the view is empty and i see in the console this error:
TypeError: (intermediate value)(...) is undefined
setup http://localhost:9050/assets/CompanyNewView-215ff09f.js:1
Removing:
<input id="cName" v-model="companyPojo.name" placeholder="Company Name"/>
<label for="cName">Company Name</label>
Solves to problem.
This driving me nuts, how in the world i can bind and use those value?
I even don't know why this is not working at all.....
答案1
得分: 1
你的数据应该是响应式的，以便正确绑定，请尝试使用 ref 来创建你的数据属性：
<script setup lang="ts">
import { ref } from 'vue';
import type { CompanyPojo } from "@/rest/restapi-companies";
import { createNewCompany } from "@/rest/restapi-companies";
const companyPojo = ref<CompanyPojo>({});
</script>
英文:
Your data should be reactive in order to be bound correctly try to use ref to create your data property :
<script setup lang="ts">
import {ref} from 'vue'
import type {CompanyPojo} from "@/rest/restapi-companies";
import {createNewCompany} from "@/rest/restapi-companies";
const companyPojo = ref<CompanyPojo>({});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论