Q&A
sessionを使用するなら、別にVueがなくても表示させることはできますけどね。Vueが重宝されるのはリアルタイムに値を変更、保持したい場合などです。
Laravelと、Vue.jsを勉強しています。
今までJqueryを使用していた画面を、vueにしてみるということを、勉強も兼ねて行っています。
注文画面と注文確認画面を実装しているのですが、
確認画面から戻った時に、一度入力した値はセッションから取得して初期値として表示させたいです。
そのような作りにする場合、
以下のように、bladeにvue.jsを記述する方法だと不可能でしょうか？
コンポーネントでvue.jsを使った方がよいですよね…
こうあるべき というのをお聞きしたくて質問してしまいました。
order.blade.php ※vue部分は途中です。
<?php //確認ボタン if($product->stocks->avairable >= 1) { $btn_kakunin = <<<VALIABLE_END <div class="md:w-4/12"> <input type="button" class="form__button w-full button" value="確認" id="order_regist" @click="regist"> </div> VALIABLE_END; } else { $btn_kakunin = <<<VALIABLE_END <div class="error mt-4 pl-4 text-sm error_text" style="color: #D31004;"> 申し訳ございません、在庫切れのためご注文いただけません。 </div> VALIABLE_END; } //画像の表示。画像がないときは表示しない if(is_null($product->image)) { $image_html = ""; } else { $image_html = <<<VALIABLE_END <img src='/storage/products/{$product->image}' alt="" /> VALIABLE_END; } if(is_null($product->image2)) { $image_html2 = ""; } else { $image_html2 = <<<VALIABLE_END <img src='/storage/products/{$product->image2}' alt="" /> VALIABLE_END; } ?> <!doctype html> <html> <head> ※省略 </head> <body class="p4ditect"> <div id="app"> <main> <h1 class="page-heading">ご注文ページ</h1> <div class="bg-secondary-lighten-1 py-10"> <div class="container"> <div class="grouping shadow-md mb-6 md:w-10/12 max-w-screen-sm mx-auto"> <h2 class="grouping__header">購入する商品</h2> <div class="sm:flex items-center"> <div class="sm:w-5/12 flex justify-center -m-2 mb-2 sm:mb-0 sm:pr-8"> <div class="p-2 max-w-1/2 md:max-w-3/4"> <?php print($image_html); ?> </div> <div class="p-2 max-w-1/2 md:max-w-3/4"> <?php print($image_html2); ?> </div> </div> <div class="sm:w-7/12"> <h3 class="font-bold text-lg">{{ $product->name }}</h3> <h3 class="font-bold text-lg my-2 flex items-baseline"> 価格： <span class="text-lg text-red">{{ $product->price }}</span><span class="text-base">円</span><span class="text-xs font-normal">(税込)</span> <span class="border border-red p-1 text-red text-sm self-center leading-none ml-2">送料無料</span> </h3> <div class="text-xs font-normal"> <?php print(nl2br($product->description)); ?> </div> </div> </div> </div> <div class="grouping shadow-md md:w-10/12 max-w-screen-sm mx-auto"> <h2 class="grouping__header">購入者情報の入力</h2> <form class="form" action="order_check.php" method="POST"> <input type="hidden" name="product_id" id="product_id" value="{{ $product->id }}"> <input type="hidden" name="product_price" id="product_price" value="{{ $product->price }}"> <input type="hidden" name="product_name" id="product_name" value="{{ $product->name }}"> <input type="hidden" name="product_description" id="product_description" value="{{ $product->description }}"> <input type="hidden" name="page" id="page" value="{{ $page }}"> <div class="form__group"> <label class="form__label form__label--required">メールアドレス</label> <div class="md:w-8/12"> <input type="text" class="form__input" name="buy_email" v-model="order_email"> </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-8/12 text-sm"> ※誤入力にご注意ください <br/>※携帯のキャリアメールの場合、お客様の設定によりメールが届かない場合がございますのでご注意ください。 </div> </div> <div class="form__group mt-0"> <label class="form__label form__label--required">名前@{{ order_name }}</label> <div class="md:w-6/12"> <input type="text" class="form__input" name="buy_name" v-model="order_name"> </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-8/12 text-sm"> ※ご入力いただいたお名前で領収書を発行いたします。 </div> </div> <div class="form__group"> <label class="form__label form__label--required">名前フリガナ</label> <div class="md:w-6/12"> <input type="text" class="form__input" name="buy_namekana" value="<?php if(isset($_SESSION['buy_namekana'])){print $_SESSION['buy_namekana'];} ?>"> </div> </div> <div class="form__group"> <label class="form__label form__label--required">郵便番号 </label> <div class="w-12/12 md:w-4/12"> <input type="text" class="form__input" placeholder="例）1230011" name="buy_post" value="<?php if(isset($_SESSION['buy_post'])){print $_SESSION['buy_post'];} ?>" onKeyUp="AjaxZip3.zip2addr('buy_post', '', 'buy_address', 'buy_address');"> </div> </div> <div class="form__group"> <label class="form__label form__label--required">ご住所（町名まで）</label> <div class="md:w-8/12"> <input type="text" class="form__input" name="buy_address" value="<?php if(isset($_SESSION['buy_address'])){print $_SESSION['buy_address'];} ?>"> </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-8/12 text-sm"> ※正しいことをよくご確認ください。商品の配送先になります。 </div> </div> <div class="form__group"> <label class="form__label form__label--required">ご住所（番地以降）</label> <div class="md:w-8/12"> <input type="text" class="form__input" name="buy_address2" autocomplete="new-password" value="<?php if(isset($_SESSION['buy_address2'])){print $_SESSION['buy_address2'];} ?>"> </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-8/12 text-sm"> ※正しいことをよくご確認ください。商品の配送先になります。 </div> </div> <div class="form__group"> <label class="form__label form__label--required">お支払方法</label> <div class="md:w-8/12"> <select class="form-control form__input" id="payment_method" name="payment_method"> <option value="1">クレジットカード</option> <option value="2">銀行振込</option> </select> </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-8/12 text-sm"> ※お支払い方法は「クレジットカード」と「銀行振込」がご利用可能です。 </div> </div> <div class="form__group" style="margin-top:0!important; color:#D31004;"> <label class="form__label"></label> <div class="md:w-2/8 text-sm"> <img src="/img/credit_card.gif" style="width: 150px"> </div> </div> <div class="form__group"> <div class="form__label"></div> <div class="text-sm" > <!--<div class="max-w-3/4"><img src="../assets/images/credit_card.gif"></div>--> </div> </div> <div class="form__group"> <div class="form__label"></div> <?php print($btn_kakunin); ?> </div> </form> <div class="error mt-4 pl-4 text-sm error_text" id="result" style="color: #D31004;"></div> </div> </div> </div> </main> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { order_email: '', order_name: '', }, methods:{ regist: function() { let product_name = document.getElementById("product_name").value; alert("確認:" + product_name); }, } }) </script> </body> </html>
あなたの回答
tips
プレビュー
