Der umgeschriebene Titel lautet: VueJS Typescript V-Model-Typ „Nummer“ kann nicht dem Typ „Nullable<string>“ zugewiesen werden.

Question

Ich bin also neu bei Typescript und VueJS und all ihren neuen Funktionen.

Alles funktioniert wie erwartet, aber ich kann die Typoskriptfehler nicht beseitigen und gleichzeitig V-Model verwenden.

Ich entwickle eine Netzwerkansicht, damit Mitglieder ihre Eigenschaften überprüfen und ändern können. Ich erhalte Mitgliedsdaten von der API und speichere sie im PiniaStore. Das bedeutet, dass ich mehrere Eingabefelder habe, deren Mitglieder Zahlen und Zeichenfolgen sein müssen. Das AFAIK-V-Modell ist die beste Wahl für Eingabefelder.

 Der Typ „string number |“ kann nicht dem Typ „Nullable<string>“ zugewiesen werden.
  Der Typ „Nummer“ kann nicht dem Typ „Nullable<string>“ zugewiesen werden.

Keine der vorgeschlagenen Lösungen für Stackoverflow-Fragen zu diesem Fehler (wie diese oder diese) passt zu meinem Problem. Ich habe eine schlechte Problemumgehung gefunden, ich verwende kein Änderungsereignis im Vorlagenblock anstelle des V-Modells und habe den gleichen Fehler in meinem Skript erhalten, aber durch //@ts-ignore< /code>

Zuallererst möchte ich wissen, wie man Typoskriptfehler in VueJs-Vorlagenblöcken auskommentiert, was hier bereits gefragt wurde.

Zweitens: Wie kann ich dieses Problem lösen, ohne Schreibfehler zu bekommen?

Wenn ich mir den Code unten ansehe, erhalte ich diesen Fehler bei v-model und weiß nicht, wie ich ihn beheben kann:

<script setup lang="ts">
import { useMembershipStore } aus "@/stores/membership";

const memberStore = useMembershipStore();
MitgliedschaftStore.getMembership();
const { Mitgliedschaft } = storeToRefs(membershipStore);

Funktion save() {
  if (membership.value) {
    MitgliedschaftStore.updateMembership(membership.value);
  }
}
</script>


<Vorlage>
  <div v-if="membership === null" class="loading">
    <h2>Laden</h2>
  </div>
  <div v-else class="members-table">
    <div v-for="(value, key) in Object.keys(membership)"
      <br />
      <InputText type="text"
        v-model="Mitgliedschaft[Wert als Schlüssel des Mitgliedschaftstyps]"
      />
    </div>
    <Button @click="save()"
  </div>
</template>

Das ist meine Typdefinition: membershipstore.ts

export type MembershipStoreState = {
  Mitgliedschaft: Mitglied |. null;
};

type.ts

export interface Member {
  id?: Nummer;
  user_id?: string;
  user_attr: string |. null;
  create_attr?: string |. null;
  admin_attr?: string |. null;
}

Ich habe auch herausgefunden, woher der Typ Nullable kommt. Es stammt aus der PrimeVues-Typdefinition seiner Komponente InputText, die hier zu finden ist:

export interface InputTextProps erweitert InputHTMLAttributes {
    /*** Wert der Komponente.*/
    modelValue?: Nullable<string>;
}

Vollständige Codebeispiele finden Sie hier

Vollständiges Codebeispiel mit Änderungsereignissen und Problemumgehung für Fehler

Answer 1

我想您正在定义 membership: Member|null 来检查加载程序

你可以试试这个

export type MembershipStoreState = {
  membership: Member;
};

在 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 并且您的正在加载将可见