vue.js3超初心者向け。バリデーションエラー時のフォームの値を入力直前に戻す方法

1 回閲覧されました

公開日 : 2025年9月19日
最終更新日 : 2025年7月13日

みなさんこんにちは、jonioです。

今回はフォームに入力した値がバリデーションエラーに引っ掛かった時に入力直前の値に戻す方法のメモになります。

1 Laravelの無料学習サイトを作りました
2 入力前の値を保存する
3 入力直前の値に戻す

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

入力前の値を保存する

下記の記述をします。

<template>
<input
    type="text"
    v-model="formValue"
    @focus="storeData"
/>
</template>

<script setup>
import { ref } from 'vue';

const formValue = ref('');
const previousFormValue = ref('');

const storeData = () => {
  previousFormValue.value = formValue.value;
}
</script>

<template>
<input
    type="text"
    v-model="formValue"
    @focus="storeData"
/>
</template>

<script setup>
import { ref } from 'vue';

const formValue = ref('');
const previousFormValue = ref('');

const storeData = () => {
  previousFormValue.value = formValue.value;
}
</script>

フォームをクリックした時点でフォームの値を保存したいので5行目の「@focus」を使います。

1回目にフォームをクリックした時点ではフォームの空なので1回目でバリデーションエラーが起きた時はフォームのは空になりますが2回目以降フォームに値を入力してバリデーションエラーが起きた時は入力直前に値を戻すことができます。

入力直前の値に戻す

フォームからマウスを外した時に動作させます。

下記の記述をします。

<template>
<input
    type="text"
    v-model="formValue"
    @focus="storeData"
    @blur="inputData"       //この行を追加
/>
</template>

<script setup>
import { ref } from 'vue';

const formValue = ref('');
const previousFormValue = ref('');

const storeData = () => {
  previousFormValue.value = formValue.value;
}

const inputData = () => {
  if (バリデーションエラーが起きた時) {
    formValue.value = previousFormValue.value;
  }
}
</script>

<template>
<input
    type="text"
    v-model="formValue"
    @focus="storeData"
    @blur="inputData"       //この行を追加
/>
</template>

<script setup>
import { ref } from 'vue';

const formValue = ref('');
const previousFormValue = ref('');

const storeData = () => {
  previousFormValue.value = formValue.value;
}

const inputData = () => {
  if (バリデーションエラーが起きた時) {
    formValue.value = previousFormValue.value;
  }
}
</script>

これで完成です。