>  Q&A  >  본문

다시 작성된 제목은 다음과 같습니다. 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>
P粉863295057P粉863295057443일 전578

모든 응답(1)나는 대답할 것이다

  • P粉779565855

    P粉7795658552023-08-26 09:26:56

    당신이 정의하고 있다고 생각합니다 membership: Member|null 来检查加载程序

    이것을 시도해 볼 수 있습니다

    으아악

    HTML에서

    으아악

    Object.keys(membership).length === 0 将检查您是否已填充界面的任何键,否则它将返回 true 并且您的正在加载표시됩니다

    회신하다
    0
  • 취소회신하다