【Vue3×TypeScritp】watch関数を使ったバリデーション(CompositionAPI)

2023年2月26日

URLをコピーしました！

CompositionAPIでのwatch関数

最近Vue3のCompositionAPIでアプリケーション開発をしている。まだまだVueに関しては未熟だが、日々成長している実感はある。

この記事では、CompositionAPIでwatch関数を使用する場合にどの様な記述をすればよいかをまとめておく。watch関数の中ではバリデーションに関する記述をしています。

メモ程度にここに記録しておきますが、より詳しいことを知りたいかたはVueの公式ドキュメントを参照するようにしてもらえると助かります。

実際に書いたwatch関数

<script lang="ts">
import { defineComponent, reactive, watch, computed } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      gorira_code: "",
      exam_gorira_error: "",
    });
・
・
省略
・
・
    watch(
      () => data.gorira_code,
      () => {
        data.exam_gorira_error = "";
        if (data.gorira_code == "") {
          data.exam_gorira_error = "入力してください";
        } else if (!data.gorira_code.match(/[0-9]{8}/)) {
          data.gorira_code_error = "正しい形式で入力してください";
        } else if (data.gorira_code.length != 8) {
          data.gorira_code_error = "8桁で入力してください";
        }
      }
    );
    const hasError = computed(
      () =>
        data.exam_code_error != "" ||
    );
    return { data, hasError };
  },
・
・
・
省略
</script>

結構省略したので、見づらいかもしれません。

watch関数について

    watch(
      () => data.gorira_code,
      () => {
        data.exam_gorira_error = "";
        if (data.gorira_code == "") {
          data.exam_gorira_error = "入力してください";
        } else if (!data.gorira_code.match(/[0-9]{8}/)) {
          data.gorira_code_error = "正しい形式で入力してください";
        } else if (data.gorira_code.length != 8) {
          data.gorira_code_error = "8桁で入力してください";
        }
      }
    );

watchに関してはこの様な形で記述することができるらしい。

ちなみにこのVue公式ドキュメントに詳しいことは記載してあります。