質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • PHP

    20307questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16376questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    692questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Symfony

    130questions

    Symfony はPHPで記述されたWebアプリケーションフレームワークです。よく利用するコーディングをテンプレーティングするなど、Webアプリケーション開発の効率化を目的として設計されています。

Vue+axiosでフォーム送信後、エラーになると入力値が保持されない。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 496

jojo003

score 6

現在のプロジェクトでvueを使っています。
プログラミング自体初心者なのでVueはとても難しく感じます…。
1日悩んでも解決策が見つからなかったので、質問させてください。

フォームを生成するのにaxiosでJsonResponseを拾ってきて、twigで既存データを表示している箇所があります。
追加ボタンを押すと空白のフォームを生成し、新規のデータを入力できるのですが、
この箇所が、例えばバリデートエラーなどで元画面に戻った時に、入力した値が保持されず困っています。

以下コード抜粋です。

--javascript--
new Vue({
    el: '#mainArea',
    delimiters: ['${', '}'],
    data: {
        details: [],
    },
    mounted: async function () {
        const Id = document.getElementById('mainArea').dataset.Id;
        if (Id) {
            const url = Routing.generate('detail_view', {id: Id});
            const res = await axios.get(url);
            this.details = res.data.details;
        }
    },
    methods: {
        removeDetail: function (detail) {
            const idx = this.details.indexOf(detail);
            this.details.splice(idx, 1);
        },
        addDetail: function () {
            this.details.push({
                Name: '',
                Value: '',
            });
        },
    }
});
--controller.php--
   //DBから検索したデータをjsonで返し、axiosで取得する
    /**
     * @Route("/getView/id/{id}", name="detail_view", options={"expose"=true})
     */
    public function getDetailView(int $id, DetailRepository $dRepo ): JsonResponse
    {   
        $details = $wdRepo->findById($id);
        return $this->json([
                'details' => $details]);
    }
--template--
<div id="mainArea">
  <div class="BtnArea">
   <!-- add()メソッドでフォーム追加、removeで削除 -->
     <button type="button" @click="add()">追加</button>
     <button type="button" @click="remove(detail)">削除</button>
  </div>
  <div>
   <table>
     <thead>
       <tr>
         <th>名称</th>
         <th></th>
        ・・・
       </tr>
     </thead>
     <tbody>
         <!-- v-forで取得した値をループ表示 -->
       <tr v-for="(detail, index) in details">
         <td aria-label="名称">
           <div>
              <input type="text" :name="detail_name[]" v-model="detail.name">
            </div>
         </td>
         <td aria-label="値">
            <div>
               <textarea :name="detail_value[]" v-model="detail.value"></textarea>
            </div>
          </td>
         ・・・
     </tbody>
   </table>
 </div>

フォームを生成する際に、基本的には、symfonyのformBuilderを使用しており、
別途、付随するDBデータを表示する際にformbuilderを経由せずに、上記の方法を用いています。
formBuilderで生成したフォームの分は $form->handleRequest($request);でエラーになっても入力値を保持してくれます。

なにか良い方法があれば、教えていただきたいです。
説明下手で申し訳ありませんが、お知恵貸していただけると助かります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

formを送信時に以下のようにSymfonyフォームの値とv-bindでvue側で取得した値を結び付けてPostする方法で対応しました。

javascript
submit: async function (formId) {
            const form = document.getElementById(formId);
            const formData = new FormData(form); //symfonyのフォーム値取得
            formData.append('details', JSON.stringify(this.details)); //vueでform値取得

            const res = await axios.post(form.dataset.url, formData);//twigのformタグ内にdata-urlでPost先を指定しておく。
            if (res.data.success) {
                location.href = res.data.url;
            } else {
                //エラーメッセージ
            }


Post先でコントローラでPostされた値を処理して登録処理、ビューに表示する処理などを行えばエラー時も入力値を保持できました。
拙い説明でしたがご回答いただきありがとうございます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

SPA じゃないっぽいので、送信前にフォーム内容を Cookie や Local Storage に保存して、戻ったときに復元するしかないんじゃないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20307questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16376questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    692questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Symfony

    130questions

    Symfony はPHPで記述されたWebアプリケーションフレームワークです。よく利用するコーディングをテンプレーティングするなど、Webアプリケーション開発の効率化を目的として設計されています。