重写后的标题为：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 问题的建议解决方案（例如这个或这个）都不适合我的问题。我发现了一个不好的解决方法，我不喜欢在模板块中使用更改事件而不是 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 类型的来源。它来自其组件InputText的PrimeVues类型定义，可以在这里找到：

export interface InputTextProps extends InputHTMLAttributes {
    /*** 组件的值。*/
    modelValue?: Nullable<string>;
}

完整的代码示例可以在这里找到

使用更改事件的完整代码示例，其中包含错误的解决方法

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