今回は、フォーム周りのUI修正についての記事になります。
具体的には
送信成功・失敗のメッセージにv-alertを使用
フォーム送信後、フォームの入力内容を初期化
といった修正を加えました。
送信成功・失敗にv-alert コンポーネント使用
送信の成否のメッセージを目立たせるためにv-alartのsuccessとerrorを使用しました。
そのままだとちょっと大きすぎるのでdenseで少し小さく表示させています。
これでも位置がちょっとズレていたり、やっぱり少し大きかったりするのですが、ひとまず今はこれで。
送信後（登録後）フォームを初期化
送信成功した後も入力値が入ったままだったので、送信成功時のみ入力値が初期化されるようにしました。（上に貼った画像参照）
コードはこちらを参考にさせていただきました。
async submit() {
const params = {
title: this.title, //タイトル
author: this.author, //投稿者
post_date: this.post_date, //投稿日時
content: this.content, // 本文
}
if (this.$refs.formref.validate()) {
// すべてのバリデーションが通過したときのみ
// if文の中に入る
try{
await axios.post(process.env.VUE_APP_API_URL, params)
this.success = true; // 「送信成功！」表示
this.failure = false; // 「送信失敗」非表示
} catch(e) {
console.log("response error")
this.failure = true; // 「送信失敗」表示
}
} else {
this.success = false;
}
if (this.success) {
this.reset()
}
},
reset(){
this.$refs.formref.reset();
},送信成功時のみ（「送信成功！」メッセージ表示時のみ）reset()を呼び出すようになっています。
はじめは成功時にフォームの各項目をnullにするという方法を考えていたのですが、実際にやってみると入力必須項目としてのバリデーションに引っかかってしまいました。
これも公式ドキュメントに記載があるとのことで、もっとよく探してみるべきだなと思いました。
この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。