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>
<!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>
<!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」と入力します。
「リセット」ボタンをクリック実行すると、「テキストの内容がリセットされました」というテキストを表示します。