Le titre réécrit est : Le type de modèle v VueJS Typescript 'numéro' ne peut pas être attribué au type 'Nullable<string>'

Question

Je suis donc nouveau sur Typescript et VueJS et toutes leurs nouvelles fonctionnalités.

Tout fonctionne comme prévu, mais je ne peux pas me débarrasser des erreurs dactylographiées et utiliser v-model en même temps.

Je développe une vue réseau permettant aux membres d'inspecter et de modifier leurs propriétés. Je récupère les données des membres de l'API et les stocke dans PiniaStore. Cela signifie que j'ai plusieurs champs de saisie qui nécessitent que les membres soient des nombres et des chaînes. Le modèle v AFAIK est le meilleur choix pour les champs de saisie.

 Le type 'string number | undefined' n'est pas attribuable au type 'Nullable'.
  Le type « numéro » ne peut pas être attribué au type « Nullable ».
≪/pré>
Aucune des solutions suggérées aux questions de stackoverflow concernant cette erreur (comme celle-ci ou celle-ci) ne correspond à mon problème. J'ai trouvé une mauvaise solution de contournement, je n'aime pas utiliser l'événement de changement dans le bloc de modèle au lieu du v-model et j'ai eu la même erreur dans mon script mais par //@ts-ignore< /code> 

Tout d'abord, ce que je demande vraiment, c'est comment commenter les erreurs dactylographiées dans les blocs de modèles VueJs, ce qui a déjà été demandé ici. 

Deuxièmement, comment puis-je résoudre ce problème sans obtenir d’erreurs de frappe ? 
En regardant le code ci-dessous, j'obtiens cette erreur dans v-model et je ne sais pas comment la corriger : 

importer { useMembershipStore } depuis "@/stores/membership" ;

const memberStore = useMembershipStore();
memberStore.getMembership();
const {adhésion} = storeToRefs(membershipStore);

fonction save() {
  si (adhésion.valeur) {
    MembershipStore.updateMembership(membership.value);
  }
}




  

    
Chargement
  
  

    

      
    
    
  


≪/pré>
Voici ma définition de type :
membershipstore.ts
type d'exportation MembershipStoreState = {
  adhésion : Membre nul |
} ;
≪/pré>
type.ts
interface d'exportation Membre {
  identifiant ? : numéro ;
  user_id?: chaîne ;
  user_attr : chaîne nulle ;
  create_attr?: chaîne null;
  admin_attr? : chaîne nulle ;
}
≪/pré>
J'ai également compris d'où vient le type Nullable Il provient de la définition de type PrimeVues de son composant InputText, que l'on peut trouver ici : 
interface d'exportation InputTextProps étend InputHTMLAttributes {
    /*** Valeur du composant.*/
    modelValue? : Nullable;
}
≪/pré>
Des exemples de code complets peuvent être trouvés ici

Exemple de code complet utilisant des événements de modification avec une solution de contournement pour l'erreur

Answer 1

Je pense que vous définissez membership: Member|null 来检查加载程序

Vous pouvez essayer ceci

export type MembershipStoreState = {
  membership: Member;
};

En HTML

<template>
  <div v-if="Object.keys(membership).length === 0" class="loading">
    <h2>Loading</h2>
  </div>
  <div v-else class="members-table">
    <div v-for="(value, key) in membership" > // thanks to @Dimava's comment
      <br />
      <InputNumber v-if = "key === 'id' || key === 'user_id'"
        v-model="membership[key]"
      />
      <InputText type="text" v-else
        v-model="membership[key]"
      />
    </div>
    <Button @click="save()" />
  </div>
</template>

Object.keys(membership).length === 0 将检查您是否已填充界面的任何键，否则它将返回 true 并且您的正在加载sera visible