フォームから送信後、input内のテキスト等を空にする処理を自力で行うと
バリデーションが発火してしまう（入力必須 など）
これを解消するためには、
this.$refs.フォームのref名.reset();を任意のタイミングで発動させる
vueのhtml部分
<v-form ref="test_form">
//中略
</v-form>vueの送信メソッド部分
axios.post('/api/register', this.postData)
.then(response => {
//中略
this.$refs.test_form.reset();
})これでいい感じにフォームがリセットされる。
バリデーションエラーもでない。
veutify限定っぽい。
別のCSSフレームワーク（Bootstrap vue)で試したら、
_this3.$refs.test_form.reset is not a function
ってエラーが出て動作しなかった。
それでもバリデーションメッセージが出てしまう場合
- refに同じ値を持つhtmlタグが複数ある
- refに大文字の文字列が含まれている（大文字があるとうまく動作しなかった）
大文字あかんとか事前説明ないとわからんやんけ。
関係ないフォームのバリーションエラーがなぜか発火する場合
実際にリセットしたいフォームと使っているモデル名が同じだと、別のフォームでもバリデーションエラーが発火してしまう。
理由はモデルの値だけがいきなり空にされたからびっくりしている。
投稿成功時、編集キャンセル時などにも両方のバリデーションをリセットすると無難。
<template>
<div>
<v-form ref="manual_registration_form" v-model="valid" lazy-validation>
<v-text-field v-model="value.serial" label="シリアル">
</v-text-field>
<v-btn text @click="registerManualy" color="primary">登録</v-btn>
</v-form>
<v-form ref="update_form" v-model="valid" lazy-validation>
<v-text-field v-model="value.serial" :rules="[rules.alphaNum, rules.required,rules.counter50]" :counter="50"
hint="半角英数字" filled prepend-icon="mdi-alpha-s-box">
</v-text-field>
<v-btn text color="primary" @click="update"> </v-btn>
</v-form>
</div>
</template>
<script>
export default {
data() {
return {
value: {
serial: "",
},
}
},
methods: {
registerManualy(){
//データをポストするapiを実行
this.resetvalue()//フォームをリセット
},
updata(){
//データをポストするapiを実行
this.resetvalue()//フォームをリセット
},
resetvalue() {
//モデル名が同じvalueだと関係ないフォームでもバリデーションエラーが発火するので、
//まとめてリセット
this.$refs.update_form.reset()
this.$refs.manual_registration_form.reset()
},
}
}
</script>参考にしたサイト
