Vuetify で フォームのバリデーション処理を書こうとしたら以下のエラーが発生した
TS2532: Object is possibly 'undefined'.
169 |
170 | const convert = (text:string) => {
> 171 | if (!form.value.validate()) { return false }
| ^^^^^^^^^^
172 | const convertedText = text.replace(regExp.value, (match) => {
173 | const index = charDict[fromType.value].indexOf(match)
174 | return charDict[toType.value][index]
Object は unefined の可能性があるよ、という内容だ。
ちなみにどのように設定してるかというと、
<v-form
ref="form"
>
<v-textarea
v-model="beforeText"
placeholder="変換したい文字列を入力してください"
:counter="1000"
outlined
:rules="formRules"
@input="convert(beforeText)"
/>
</v-form>
のように ref="form"
で要素に名前を指定し、
setup(){
const form = ref<HTMLFormElement>()
}
としているためだ。
refに対する適切なジェネリクスを付与すればいいのだが、今回はオプショナルチェーンで対応することにした。
form.value?.validate() // ?. で書き換え
これで一応、コンパイルは通過できるようになった。
でも他にもいい方法がある…かも。ご存知の方、情報お待ちしています!