The rewritten title is: VueJS Typescript v-model type 'number' cannot be assigned to type 'Nullable<string>'

Question

So I'm new to Typescript and VueJS and all their new features.

Everything works as expected, but I can't get rid of the typescript errors and use v-model at the same time.

I'm developing a network view for members to inspect and change their properties. I am getting member data from API and storing it in PiniaStore. This means that I have several input fields that require members to be numbers and strings. AFAIK v-model is the best choice for input fields.

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

All the suggested solutions to stackoverflow questions about this error (like this one or this one) don't fit my problem. I found a bad workaround, I don't like using change event in template block instead of v-model and I got the same error in my script but by //@ts-ignore< /code> Ignore it.

First of all, what I'm really asking for is how to comment out typescript errors in VueJs template blocks, which has already been asked here.

Secondly, how can I solve this problem without getting typescript errors?

Looking at the code below, I'm getting this error at v-model and don't know how to fix it:

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

This is my type definition: membershipstore.ts

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

type.ts

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

I also figured out where the Nullable type comes from. It comes from the PrimeVues type definition of its component InputText, which can be found here:

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

Full code examples can be found here

Full code example using change events with workaround for error

Answer 1

I think you are defining membership: Member|null to check the loader

You can try this

export type MembershipStoreState = {
  membership: Member;
};

In 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 will check if you have populated any keys of the interface, otherwise it will return true and your Loading will be visible