다시 작성된 제목은 다음과 같습니다. VueJS Typescript v-model 유형 'number'는 'Nullable<string>' 유형에 할당할 수 없습니다.
<p>저는 Typescript와 VueJS 및 이들의 모든 새로운 기능을 처음 접했습니다. </p><p>
모든 것이 예상대로 작동하지만 TypeScript 오류를 제거하고 동시에 v-model을 사용할 수 없습니다. </p><p>
구성원이 자신의 속성을 검사하고 변경할 수 있는 네트워크 보기를 개발 중입니다. API에서 회원 데이터를 가져와서 PiniaStore에 저장하고 있습니다. 이는 구성원이 숫자와 문자열이어야 하는 여러 입력 필드가 있음을 의미합니다. AFAIK v-model은 입력 필드에 가장 적합한 선택입니다. </p>
<pre class="brush:bash;toolbar:false;"> 'string | number null | undefine' 유형은 'Nullable<string>'에 할당할 수 없습니다.
'number' 유형은 'Nullable<string>' 유형에 할당할 수 없습니다.
</pre>
<p>이 오류(예: 이 오류 또는 이 오류)에 대한 stackoverflow 질문에 대해 제안된 솔루션 중 어느 것도 내 문제에 적합하지 않습니다. 잘못된 해결 방법을 찾았습니다. v-model 대신 템플릿 블록에서 변경 이벤트를 사용하는 것을 좋아하지 않으며 내 스크립트에서 동일한 오류가 발생했지만 <code>//@ts-ignore< /code> </p>
<p>우선, 제가 정말 원하는 것은 VueJs 템플릿 블록의 TypeScript 오류를 주석 처리하는 방법입니다. 이에 대해서는 이미 여기에서 문의했습니다. </p><p>
둘째, TypeScript 오류 없이 이 문제를 어떻게 해결할 수 있습니까? </p>
<p>아래 코드를 보면 <code>v-model</code>에서 이 오류가 발생하며 이를 해결하는 방법을 모르겠습니다. </p>
<pre class="brush:bash;toolbar:false;"><스크립트 설정 lang="ts">
"@/stores/membership"에서 { useMembershipStore } 가져오기;;
const MembershipStore = useMembershipStore();
MembershipStore.getMembership();
const {멤버십 } = storeToRefs(membershipStore);
함수 저장() {
if (membership.value) {
memberStore.updateMembership(membership.value);
}
}
</스크립트>
<템플릿>
<div v-if="멤버십 === null" class="로드 중">
로드 중
</div>
<div v-else class="members-table">
<div v-for="(value, key) in Object.keys(membership)>
<br />
<InputText 유형="텍스트"
v-model="멤버십[멤버십 유형의 키 값]"
/>
</div>
<버튼 @click="저장()"
</div>
</템플릿>
</pre>
<p>이것은 내 유형 정의입니다.
<strong>membershipstore.ts</strong></p>
<pre class="brush:bash;toolbar:false;">내보내기 유형 MembershipStoreState = {
회원: 회원 null;
};
</pre>
<p><strong>type.ts</strong></p>
<pre class="brush:bash;toolbar:false;">내보내기 인터페이스 멤버 {
ID 번호;
user_id?: 문자열;
user_attr: 문자열 |
create_attr?: 문자열 |
admin_attr?: 문자열 |
}
</pre>
<p>또한 <code>Nullable<string></code> 유형이 어디에서 왔는지 알아냈습니다. 이는 해당 구성 요소인 InputText의 PrimeVues 유형 정의에서 비롯되며 여기에서 찾을 수 있습니다. </p>
<pre class="brush:bash;toolbar:false;">내보내기 인터페이스 InputTextProps는 InputHTMLAttributes를 확장합니다.
/*** 구성품의 가치.*/
modelValue?: Nullable
;;
}
</pre>
<p>전체 코드 예제는 여기에서 찾을 수 있습니다</p><p>
오류에 대한 해결 방법과 함께 변경 이벤트를 사용하는 전체 코드 예제</p>
