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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

PHP

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

Symfony

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

JavaScript

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

Q&A

解決済

2回答

1383閲覧

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

jojo003

総合スコア14

Vue.js

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

PHP

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

Symfony

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

JavaScript

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

0グッド

2クリップ

投稿2018/05/25 15:52

編集2018/07/18 10:59

現在のプロジェクトで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);でエラーになっても入力値を保持してくれます。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

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された値を処理して登録処理、ビューに表示する処理などを行えばエラー時も入力値を保持できました。
拙い説明でしたがご回答いただきありがとうございます。

投稿2018/06/03 14:55

jojo003

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2018/05/25 20:19

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問