VueJS Typescript v-model 类型“number”不可分配给类型“Nullable<string>”

Question

所以我对 Typescript 和 VueJS 及其所有新功能都很陌生。
一切都按预期工作，但我无法摆脱打字稿错误并同时使用 v-model。
我正在开发一个网络视图，供成员检查和更改其属性。我从 API 获取会员数据并将其存储在 PiniaStore 中。这意味着我有几个需要成员的数字和字符串的输入字段。AFAIK v-model 是输入字段的最佳选择。

 Type 'string | number | null | undefined' is not assignable to type 'Nullable<string>'.
  Type 'number' is not assignable to type 'Nullable<string>'.

所有关于此错误的 stackoverflow 问题的建议解决方案（例如此一个或此一个）都不适合我的问题 AFAIK。我发现了一个不好的解决方法，我不喜欢在模板块中使用更改事件而不是 v-model，并且在我的脚本中出现相同的错误，但通过忽略它//@ts-ignore。

首先，我真正要求的是如何注释掉 VueJs 模板块中的打字稿错误，已经在这里询问过。
其次，如何解决这个问题而不出现打字稿错误？

看看下面的代码，我遇到了这个错误v-model，不知道如何修复它：

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

这是我的类型定义： membershipstore.ts

export type MembershipStoreState = {
  membership: Member | null;
};

类型.ts

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

我也弄清楚了这个类型Nullable<string>是从哪里来的。它来自其组件 InputText 的 PrimeVues 类型定义，可以在此处找到：

export interface InputTextProps extends InputHTMLAttributes {
    /**
     * Value of the component.
     */
    modelValue?: Nullable<string>;
}

完整的代码示例可以在这里找到
完整的代码示例，使用更改事件来解决问题，这里

Answer 1

我想你正在定义membership: Member|null检查加载程序<div v-if="membership === null" class="loading">

你可以尝试这个

export type MembershipStoreState = {
  membership: Member;
};

在 HTML 中

export type MembershipStoreState = {
  membership: Member;
};

Object.keys(membership).length === 0将检查您是否已填充界面的任何键，否则它将返回 true 并且您loading将可见