今回は、Vue.jsのバリデーションライブラリであるVuelidateについて、
バリデーションチェック後にaxiosを使用してサーバサイドへ処理をリクエストする方法を記します。
バリデーションのチェックで全ての項目で成功した場合のみ
処理を投げるようにします。
バリデーションチェックの後、成功時にサーバサイドへリクエストをする方法
※処理は最小限に記します。
スクリプト内は以下をご参照ください。
<v-text-field v-model="state.id" variant="solo"></v-text-field>
<v-btn class="me-4" @click="post(v$.$validate)">
送信
</v-btn>
<script>
export default {
const post = (validate) => {
return validate().then(
(promiseResult)=>{
if(promiseResult){
request();
}
})
}
const request = async() => {
await axios.post(url,data)
.then(async(res)=>{
})
}
return {
...他,
post
}
}
</script>
多くの必要なコードを省き、バリデーションのチェック以降の処理のみ記しました。
具体的に、ボタンをクリックした際、post関数にv$.$validateを引数として実行します。
click="post(v$.$validate)
v$.$validateは、非同期処理のコールバック関数です。
フォーム内の全てのバリデーションルールに成功するとtrueを返します。
一方で一つでも失敗するとfalseを返します。
validate().then(
(promiseResult)=>{
if(promiseResult){
request();
}
})
promiseResultはboolean型で、前述したバリデーションの結果です。
もし、成功した場合は、request関数を実行するように書いてます。
そして、request内に、axiosでHTTPリクエストを送ります。
const request =
async() => {
await axios.post(url,data)
.then(
async(res)=>{
})
}
おわりに
今回は、Vuelidateを使用して、バリデーションチェックの後に
Axiosを使用しHTTPリクエストを実行する方法を記しました。
話はそれますが、Vueのバリデーションライブラリを調べてみると
vee-validate vuelidateは、二大巨頭なようです。
私は、今回初めてvuelidateを使用し、vee-validateは使ったことがありません。
そのため、表面的にしか分かりませんが、ドキュメント的には、vuelidateの方が
私好みです。。
ただ、vee-validate vuelidateをそれぞれググると
vee-validateの方が使っている人が多そうな印象でした。
私がvuelidateを使っている理由は、刷り込みみたいなもので、
一度はvee-validateも触ってみたいなと思います。
コメント