Vue.js @resetでリセットイベントを取得する
環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125(Official Build) (64 ビット)
yarn 1.22.19
構文
@reset="イベント名"
v-on:reset="イベント名"
methods: {
イベント名: function (e) {処理コード
v-on:reset」を使用してリセットイベントを取得します。
使用例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>@resetリセットイベントサンプル</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app" > <h2 >{{val}}</h2> <form @reset="ark" > <input type="text" name="user"><br> <input type="reset" > </form> </div> <script> const res = { data() { return { val: '' } }, methods: { ark: function (e) { this.val = 'テキストの内容がリセットされました' } } } Vue.createApp(res).mount('#app') </script> </body> </html>
実行結果
テキストボックスに「arkgame」と入力します。
「リセット」ボタンをクリック実行すると、「テキストの内容がリセットされました」というテキストを表示します。