【Vue.js】モーダル表示

Comments

1. 

   @2024_Hello_World

   Questioner

   more_horiz

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

   

      /**
      * 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
       )
     }
   
   

   

2. 

   @SurferOnWww

   more_horiz

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

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

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

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

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

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

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

3. 

   @SurferOnWww

   more_horiz

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

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

4. 

   @2024_Hello_World

   Questioner

   more_horiz

   @SurferOnWww
   追加の質問はスレッドで質問するようにします。
   解決に導いていただき、このたびはありがとうございました！