【Vue.js】モーダル表示
解決したいこと
バリデーションエラーが発生したときにエラーモーダルを表示させたい。
JavaScriptで顧客情報管理Webアプリをつくっています。
バリデーションエラーを発生させたときにエラーモーダルが発生する実装をしたいです。
解決方法を教えてください。
該当するソースコード
/**
* handleSaveButtonClick
* @description 保存ボタン押下時にフラグをfalseにする
*/
const handleSaveButtonClick = (): void => {
const { updateStore } = Services.companyStore
const callBack = async (): Promise<void> => {
const requestId = Number(route.params.requestId)
const response = await updateStore(
requestId,
storeToRefs(Stores.companyStore()).store.value
)
// エラーメッセージがある場合はエラーモーダルを表示
if ('messages' in response) {
openErrorModal(
MODAL_NAME.ERROR,
response.messages.join('\n'),
'',
'閉じる',
() => {
setIsEditMode(false)
return Promise.resolve()
}
)
}
}
openConfirmationModal(
MODAL_NAME.CONFIRMATION,
'保存しますか?',
'',
'保存',
callBack
)
}
・handleSaveButtonClick関数が実行されると、openConfirmationModalが表示されます。
・モーダルの中で保存ボタンが押されると、callback関数が実行されます。
・serviceクラスでaxiosを使い、データを取得。
・responseにその値が格納されている。
・そのレスポンスのなかにエラーメッセージを確認。
if文の中の処理が実行されない←今ここ
自分で試したこと
・デバッガーで検証→responseのmessageは取得できていることが確認できた。(画像)