重寫後的標題為：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< /code> 忽略它。

首先，我真正要求的是如何註解掉 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 並且您的正在載入將可見