<p>所以我对 Typescript 和 VueJS 及其所有新功能都很陌生。</p><p> 一切都按预期工作，但我无法摆脱打字稿错误并同时使用 v-model。</p><p> 我正在开发一个网络视图，供成员检查和更改其属性。我从 API 获取会员数据并将其存储在 PiniaStore 中。这意味着我有几个需要成员的数字和字符串的输入字段。 AFAIK v-model 是输入字段的最佳选择。</p> <pre class="brush:bash;toolbar:false;"> Type 'string | number | null | undefined' is not assignable to type 'Nullable<string>'. Type 'number' is not assignable to type 'Nullable<string>'. </pre> <p>所有关于此错误的 stackoverflow 问题的建议解决方案（例如这个或这个）都不适合我的问题。我发现了一个不好的解决方法，我不喜欢在模板块中使用更改事件而不是 v-model，并且在我的脚本中出现相同的错误，但通过 <code>//@ts-ignore</code> 忽略它。</p> <p>首先，我真正要求的是如何注释掉 VueJs 模板块中的打字稿错误，这里已经问过了。</p><p> 其次，如何解决这个问题而不出现打字稿错误？</p> <p>查看下面的代码，我在 <code>v-model</code> 处出现此错误，并且不知道如何修复它：</p> <pre class="brush:bash;toolbar:false;"><script setup lang="ts"> import { useMembershipStore } from "@/stores/membership"; const membershipStore = useMembershipStore(); membershipStore.getMembership(); const { membership } = storeToRefs(membershipStore); function save() { if (membership.value) { membershipStore.updateMembership(membership.value); } } </script> <template> <div v-if="membership === null" class="loading"> <h2>Loading</h2> </div> <div v-else class="members-table"> <div v-for="(value, key) in Object.keys(membership)" > <br /> <InputText type="text" v-model="membership[value as keyof typeof membership]" /> </div> <Button @click="save()" /> </div> </template> </pre> <p>这是我的类型定义： <strong>membershipstore.ts</strong></p> <pre class="brush:bash;toolbar:false;">export type MembershipStoreState = { membership: Member | null; }; </pre> <p><strong>类型.ts</strong></p> <pre class="brush:bash;toolbar:false;">export interface Member { id?: number; user_id?: string; user_attr: string | null; create_attr?: string | null; admin_attr?: string | null; } </pre> <p>我还弄清楚了 <code>Nullable<string></code> 类型的来源。它来自其组件InputText的PrimeVues类型定义，可以在这里找到：</p> <pre class="brush:bash;toolbar:false;">export interface InputTextProps extends InputHTMLAttributes { /*** 组件的值。*/ modelValue?: Nullable<string>; } </pre> <p>完整的代码示例可以在这里找到</p><p> 使用更改事件的完整代码示例，其中包含错误的解决方法</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>