TypeScript * Vuetify * Vue3 で フォームバリデーションするときのエラー

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() // ?. で書き換え

これで一応、コンパイルは通過できるようになった。

でも他にもいい方法がある…かも。ご存知の方、情報お待ちしています!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA