<p>Je suis donc nouveau sur Typescript et VueJS et toutes leurs nouvelles fonctionnalités. </p><p> 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. </p><p> 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. </p> <pre class="brush:bash;toolbar:false;"> Le type 'string number | undefined' n'est pas attribuable au type 'Nullable<string>'. Le type « numéro » ne peut pas être attribué au type « Nullable<string> ». ≪/pré> <p>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 <code>//@ts-ignore< /code> </p> <p>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. </p><p> Deuxièmement, comment puis-je résoudre ce problème sans obtenir d’erreurs de frappe ? </p> <p>En regardant le code ci-dessous, j'obtiens cette erreur dans <code>v-model</code> et je ne sais pas comment la corriger : </p> <pre class="brush:bash;toolbar:false;"><configuration du script lang="ts"> 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); } } </script> <modèle> <div v-if="adhésion === null" class="chargement"> <h2>Chargement</h2> </div> <div v-else class="table-membres"> <div v-for="(valeur, clé) dans Object.keys (adhésion)" <br /> <InputText type="texte" v-model = "adhésion [valeur comme clé du type d'adhésion]" /> </div> <Bouton @clic="enregistrer()" /> </div> </modèle> ≪/pré> <p>Voici ma définition de type : <strong>membershipstore.ts</strong></p> <pre class="brush:bash;toolbar:false;">type d'exportation MembershipStoreState = { adhésion : Membre nul | } ; ≪/pré> <p><strong>type.ts</strong></p> <pre class="brush:bash;toolbar:false;">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é> <p>J'ai également compris d'où vient le type <code>Nullable<string></code> Il provient de la définition de type PrimeVues de son composant InputText, que l'on peut trouver ici : </p> <pre class="brush:bash;toolbar:false;">interface d'exportation InputTextProps étend InputHTMLAttributes { /*** Valeur du composant.*/ modelValue? : Nullable<string>; } ≪/pré> <p>Des exemples de code complets peuvent être trouvés ici</p><p> Exemple de code complet utilisant des événements de modification avec une solution de contournement pour l'erreur</p>

export type MembershipStoreState = {
  membership: Member;
};

<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>