【Vue2】Vueで@submitについて学ぼう
今回はVueの@submitの紹介です。
@submitとは?
@submit
は、formがsubmitされたときに呼び出されるカスタムイベントハンドラーです。
@submitを使ったPOSTの例
submitの例では、ボタンを押下時にinputの値をバリデーションチェックを行います。
バリデーションエラーの場合は、エラーメッセージを返してView側で表示を行います。
バリデーションチェック後に、エラーがなければPOST時を行います。
POSTではaxiosを使ってPOSTを行なっています。
<template>
<div>
<form @submit.prevent="handleSubmit">
<label for="username">ユーザー名:</label>
<input type="text" id="username" v-model="username" />
<span>{{ validateUsername() }}</span>
<label for="password">パスワード:</label>
<input type="password" id="password" v-model="password" />
<span>{{ validatePassword() }}</span>
<button type="submit">ログイン</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
validateUsername() {
// ユーザー名が入力されているかを確認
if (this.username.trim() === '') {
return 'ユーザー名は必須です';
}
return ''; // エラーがない場合は空文字列を返す
},
validatePassword() {
// パスワードが6文字以上であるかを確認
if (this.password.length < 6) {
return 'パスワードは6文字以上で入力してください';
}
return ''; // エラーがない場合は空文字列を返す
},
async handleSubmit() {
if (!this.validateUsername() && !this.validatePassword()) {
try {
// サーバーにログインリクエストを送信
const response = await axios.post('http://example.com/api/login', {
username: this.username,
password: this.password,
});
// サーバーからのレスポンスをコンソールに表示
console.log('サーバーからのレスポンス:', response.data);
// アクセストークンを取り出す
const accessToken = response.data.accessToken;
// 認証されたリクエストを行う
const authenticatedResponse = await axios.get('http://example.com/api/protected-data', {
headers: {
Authorization: `Bearer ${accessToken}`, // アクセストークンをヘッダーに追加
},
});
// 認証されたリクエストのレスポンスをコンソールに表示
console.log('認証されたリクエストのレスポンス:', authenticatedResponse.data);
// 他の処理を行う
} catch (error) {
// エラーが発生した場合の処理
console.error('エラー:', error.message);
window.alert('エラーが発生しました。詳細: ' + error.message);
}
} else {
console.log('バリデーションエラーがあります。');
}
},
},
};
</script>
axiosを使ってPOSTを行い、成功と失敗処理を行います。
今回の例はaxiosで行いましたが、nuxtなどでAPI通信を行うこともよくあるのでそれは別途学習していきましょう。