現在のプロジェクトで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);でエラーになっても入力値を保持してくれます。
なにか良い方法があれば、教えていただきたいです。
説明下手で申し訳ありませんが、お知恵貸していただけると助かります。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。