Vue 3でフォームをリセットする方法

フォームのリセットボタンをクリックする方法: HTMLのフォーム要素には、resetメソッドを呼び出すためのresetボタンを配置することができます。以下のように記述します。

<form ref="myForm">
 <!-- フォームの入力要素など -->
 <button type="reset">リセット</button>
</form>

ボタンがクリックされると、フォームの入力値が初期化されます。この方法は、標準のHTMLのresetボタンを使用しています。

Vueのメソッドを使用してフォームをリセットする方法: Vueのコンポーネント内でフォームをリセットする場合、Vueのメソッドを使ってフォームの入力値を初期化することができます。以下に例を示します。

<template>
 <form ref="myForm">
   <!-- フォームの入力要素など -->
   <button @click="resetForm">リセット</button>
 </form>
</template>
<script>
export default {
 methods: {
   resetForm() {
     this.$refs.myForm.reset();
   }
 }
}
</script>

上記の例では、resetFormメソッド内でthis.$refs.myForm.reset()を呼び出してフォームをリセットしています。