書き換えられたタイトルは次のとおりです: VueJS Typescript v-model 型 'number' を型 'Nullable<string>' に割り当てることはできません

Question

つまり、私は Typescript と VueJS、そしてそれらの新機能すべてを初めて使用します。

すべて期待どおりに動作しますが、typescript エラーを取り除くことができず、同時に v-model を使用できません。

メンバーが自分のプロパティを検査および変更するためのネットワーク ビューを開発しています。 APIから会員データを取得してPiniaStoreに保存しています。これは、メンバーが数値と文字列であることを必要とする入力フィールドがいくつかあることを意味します。私の知る限り、v-modelは入力フィールドに最適な選択です。

 型 'string |number | null | unknown' は型 'Nullable<string>' に割り当てることができません。
  タイプ「number」をタイプ「Nullable<string>」に割り当てることはできません。

このエラーに関するスタックオーバーフローの質問に対する提案された解決策はすべて (これやこのエラーなど)、私の問題には当てはまりません。悪い回避策を見つけました。v-model の代わりにテンプレート ブロックで変更イベントを使用するのが好きではなく、スクリプトでも同じエラーが発生しましたが、//@ts-ignore< /code> で無視しました。

まず第一に、私が本当に求めているのは、VueJs テンプレート ブロック内の typescript エラーをコメントアウトする方法です。これはすでにここで質問されています。

次に、typescript エラーを発生させずにこの問題を解決するにはどうすればよいでしょうか?

以下のコードを見ると、v-model でこのエラーが発生していますが、修正方法がわかりません:

<スクリプト セットアップ lang="ts">
import { useMembershipStore } from "@/stores/membership";

const membersStore = useMembershipStore();
membershipStore.getMembership();
const {メンバーシップ} = storeToRefs(membershipStore);

関数 save() {
  if (メンバーシップ.値) {
    membershipStore.updateMembership(membership.value);
  }
}
</スクリプト>


<テンプレート>
  <div v-if="メンバーシップ === null" class="loading">
    <h2>読み込み中</h2>
  </div>
  <div v-else class="メンバーテーブル">
    <div v-for="(値, キー) in Object.keys(メンバーシップ)" >
      <br />
      <InputText タイプ="テキスト"
        v-model="メンバーシップ[メンバーシップのタイプのキーとしての値]"
      />
    </div>
    <ボタン @click="save()" />
  </div>
</テンプレート>

これは私の型定義です: membershipstore.ts

エクスポート タイプ MembershipStoreState = {
  メンバーシップ: メンバー | null;
};

type.ts

エクスポート インターフェイス メンバー {
  ID番号;
  ユーザー ID?: 文字列;
  ユーザー属性: 文字列 | null;
  create_attr?: 文字列 | null;
  admin_attr?: 文字列 | null;
}

Nullable 型がどこから来たのかもわかりました。これは、コンポーネント InputText の PrimeVues タイプ定義から取得されます。これは、次の場所にあります:

エクスポート インターフェイス InputTextProps extends InputHTMLAttributes {
    /*** コンポーネントの値。*/
    modelValue?: Null 可能<string>;
}

完全なコード例はここにあります

エラーの回避策を含む変更イベントを使用した完全なコード例

Answer 1

ローダーをチェックするために membership: Member|null を定義していると思います

これを試すことができます

リーリー

HTML内

リーリー

Object.keys(membership).length === 0 は、インターフェイスのキーが設定されているかどうかを確認します。そうでない場合は、true が返され、Loading が表示されます。