2024_Hello_World
@2024_Hello_World

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

【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は取得できていることが確認できた。(画像)

スクリーンショット 2024-11-12 092333.png
・if文に引っかからずモーダルが表示されなかった。

0

2Answer

if文の中の処理が実行されない←今ここ
if ('messages' in response)

MDN のドキュメント「in 演算子」によると、

"in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します"

ということですが、デバッグ結果を見ると response は配列なので messages というプロパティはその中に無いと判定されての結果では?

試しに、

if ('messages' in response[0])

としたらどうなりますか?


【追記】

もう一つ、スペルミスがあります。

誤: if ('messages' in response[0])
正: if ('message' in response[0])

以下のコードで確認してみました。

const response = [{
    context: { key: "storeName", label: "店舗名", value: "" },
    message: "店舗を入力してください",
    path: [`storeName`],
    type: "string.empty"
}];
console.log(response);
console.log('message' in response);
console.log('message' in response[0]);

上に述べたことに間違いないようです。

result.jpg

2Like

Comments

  1. ご回答いただきありがとうございました。
    エラーモーダルは表示することができました。
    しかし、エラーメッセージが複数あったときに、縦方向に並べて表示したいのですが、横並びになってしまいます。
    どのように修正すればよいかご教授いただければ幸いです。
    よろしくお願いいたします。

    スクリーンショット 2024-11-12 153233.png

       /**
       * handleSaveButtonClick
       * @description 保存ボタン押下時にフラグをfalseにする
       */
      const handleSaveButtonClick = (): void => {
        const { updateStore } = Services.companyStore
    
        const callBack = async (): Promise<void> => {
          const requestId = Number(route.params.requestId)
          const response: UpdateStoresResponse | ValidationErrorResponse =
            await updateStore(
              requestId,
              storeToRefs(Stores.companyStore()).store.value
            )
          // エラーメッセージがある場合はエラーモーダルを表示
          if (Array.isArray(response) && 'message' in response[0]) {
            const errorMessages = response.map((res) => res.message).join('\n')
            openErrorModal(MODAL_NAME.ERROR, errorMessages, '', '閉じる', () => {
              setIsEditMode(false)
              return Promise.resolve()
            })
            throw new Error('Validation error')
          }
        }
        openConfirmationModal(
          MODAL_NAME.CONFIRMATION,
          '保存しますか?',
          '',
          '保存',
          callBack
        )
      }
    
    

    スクリーンショット 2024-11-12 160939.png

  2. 上記はこのスレッドの課題「モーダル表示」とは別の話です。

    このスレッドの課題は回答で解決できたのだからここはクローズして、別の課題に関する質問は新たに別のスレッドを立ててそちらで質問願います。

    一つの問題が解決したら次の問題が出てきて、次から次へと一つのスレッドの中で質問を繰り返すのは避けてください。わけがわからなくなりますので。あとから検索などでここを訪れる閲覧者にとっては特に。

    「ガイドとヘルプ」の「about」に以下のように書いてあります。

    "Qiitaはエンジニアにとって再利用性・汎用性の高い他のユーザーにとっても役にたつ、学びのある情報が多く集まっている場であり続けたいと考えています。Qiitaは記事を読むこと、記事を書くことを通して、読む側・書く側それぞれがお互いに関わり合いを持ち、情報をみんなで育てていくことで、今後同じようなことを学んだり、悩んだりするエンジニアが使う時間を減らし、エンジニアの成長や生産性をスピードアップさせることを目指します。"

    ここに限らず、大多数の Q&A サイトは上記のような目的、一言でいうと「技術者同士の情報交換や相互サポートの場」という目的を持っているはずです。

    スレッドの内容は、一つの課題に対して一つの質問とするのがその趣旨に沿っていると思います。

  3. もう一つ、質問者は回答欄に書かないようお願いします。(自己解決できてその回答を書く場合は別)

    質問と回答がゴッチャになって、何が何だか分かりにくくなりがちなので。

スクリーンショットを拝見すると、response変数は配列のように見えます。

'test' in [{test:0}] // false
0Like

Your answer might help someone💌