Tajuk yang ditulis semula ialah: VueJS Typescript jenis v-model 'nombor' tidak boleh diberikan untuk menaip 'Nullable<string>'
<p>Jadi saya baru menggunakan Typescript dan VueJS serta semua ciri baharunya. </p><p>
Semuanya berfungsi seperti yang diharapkan, tetapi saya tidak dapat menyingkirkan ralat skrip taip dan menggunakan model v pada masa yang sama. </p><p>
Saya sedang membangunkan paparan rangkaian untuk ahli memeriksa dan menukar sifat mereka. Saya mendapat data ahli daripada API dan menyimpannya dalam PiniaStore. Ini bermakna saya mempunyai beberapa medan input yang memerlukan ahli menjadi nombor dan rentetan. AFAIK v-model ialah pilihan terbaik untuk medan input. </p>
<pre class="brush:bash;toolbar:false;"> Taipkan 'nombor rentetan |.
Taip 'nombor' tidak boleh diberikan untuk menaip 'Nullable<string>'.
</pra>
<p>Tiada penyelesaian yang dicadangkan untuk soalan stackoverflow tentang ralat ini (seperti yang ini atau yang ini) sesuai dengan masalah saya. Saya menemui penyelesaian yang buruk, saya tidak suka menggunakan acara perubahan dalam blok templat dan bukannya model v dan saya mendapat ralat yang sama dalam skrip saya tetapi dengan <kod>//@ts-ignore< </p>
<p>Pertama sekali, perkara yang saya benar-benar minta ialah cara mengulas ralat skrip taip dalam blok templat VueJs, yang telah ditanya di sini. </p><p>
Kedua, bagaimana saya boleh menyelesaikan masalah ini tanpa mendapat ralat skrip taip? </p>
<p>Melihat kod di bawah, saya mendapat ralat ini di <code>v-model</code>
<pre class="brush:bash;toolbar:false;"><script setup lang="ts">
import { useMembershipStore } daripada "@/stores/membership";
const membershipStore = useMembershipStore();
membershipStore.getMembership();
const {keahlian} = storeToRefs(membershipStore);
fungsi simpan() {
if (membership.value) {
membershipStore.updateMembership(membership.value);
}
}
</skrip>
<template>
<div v-if="keahlian === null"kelas="memuatkan">
<h2>Memuatkan</h2>
</div>
<div v-else class="meja ahli">
<div v-for="(nilai, kunci) dalam Object.keys(keahlian)"
<br />
<Jenis InputText="teks"
v-model="keahlian[nilai sebagai kunci jenis keahlian]"
/>
</div>
<Butang @klik="simpan()"
</div>
</template>
</pra>
<p>Ini ialah definisi jenis saya:
<strong>membershipstore.ts</strong></p>
<pre class="brush:bash;toolbar:false;">export type MembershipStoreState = {
keahlian: Ahli |.
};
</pra>
<p><strong>type.ts</strong></p>
<pre class="brush:bash;toolbar:false;">eksport antara muka Ahli {
nombor ID;
user_id?: string;
user_attr: rentetan |.
create_attr?: rentetan |.
admin_attr?: rentetan |.
}
</pra>
<p>Saya juga mengetahui dari mana jenis <code>Nullable<string></code> Ia datang daripada definisi jenis PrimeVues bagi komponen InputTextnya, yang boleh didapati di sini: </p>
<pre class="brush:bash;toolbar:false;">eksport antara muka InputTextProps memanjangkan InputHTMLAttributes {
/*** Nilai komponen.*/
modelValue?: Nullable<string>;
}
</pra>
<p>Contoh kod penuh boleh didapati di sini</p><p>
Contoh kod penuh menggunakan peristiwa perubahan dengan penyelesaian untuk ralat</p>
