<button type="reset">とは？
HTMLのButtonのひとつで、Formを自動でクリアできる。
参考: button 要素 - HTML | MDN
<!doctype html> <html> <body> <form> <input type="text" placeholder="username" /> <input type="password" placeholder="password" /> <button type="reset">reset</button> </form> </body> </html>
resetボタンをクリックするとFormが自動でクリアされて、地味にうれしい。
課題
Vuejsと併用すると、resetボタン押下時に見ため上はクリアされたようにみえるが、Vuejsで管理しているdataプロパティの値はクリアされない。見た目とvuejs上のデータが乖離する。
<template>
<form @submit.prevent="save">
<p>
<input type="text" v-model="text" />
</p>
<p>
<textarea v-model="textarea" />
</p>
<p>
<input type="checkbox" v-model="checked" />
</p>
<p>
<input type="radio" id="one" value="one" v-model="radio" />
<input type="radio" id="two" value="two" v-model="radio" />
</p>
<p>
<select v-model="select">
<option disabled value="" selected>please select</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</p>
<button type="reset">reset</button>
<button type="submit">save</button>
</form>
</template>
<script>
export default {
name: 'Form',
data () {
return {
text: '',
checked: false,
textarea: '',
radio: '',
select: ''
}
},
methods: {
save: function () {
console.log(`save text: ${this.text} textarea: ${this.textarea} checked: ${this.checked} radio: ${this.radio} select: ${this.select}`)
}
}
}
</script>
以下のように、resetボタンを押したあとも、dataプロパティの値がそのまま残っている。
解決方法
<button type="reset">を利用しない。
フィールドをクリアしたければ、自分でハンドラを設定してdataプロパティをリセットする。
<template>
...
<button @click="clear" type="button">reset</button>
...
</template>
<script>
...
methods: {
...
clear: function () {
this.text = ''
this.checked = false
this.textarea = ''
this.radio = ''
this.select = ''
}
}
</script>
以下のように、resetボタンを押したときに、dataプロパティもリセットされている。
dataプロパティの初期値を丸ごと設定する場合は、以下のようにも書ける。
<script>
...
// ここを再利用する
data () {
return {
text: '',
checked: false,
textarea: '',
radio: '',
select: ''
}
},
methods: {
...
clear: function () {
Object.assign(this.$data, this.$options.data.call(this))
}
}
}
</script>
参考: stack overflow
補足情報
Vuetifyというフレームワークを利用していた場合、こんな感じで組み込みのFormコンポーネントをrefで参照してreset()メソッドを呼び出せば、nullで初期化してくれる。
参考: Vuetify issue
<template>
...
<v-form ref="form">
...
</template>
<script>
...
clear: function () {
this.$refs.form.reset()
}
...
</script>
リッチなUIフレームワークを利用すると、上記のような恩恵も受けられる。