実現したいこと
「都道府県」セレクトボックスを選択すると隣の「エリア」セレクトボックス(今はまだ置いていません)の内容が自動生成される仕組みを
Vue.jsで実現したいです。
Vue.jsは触ったことがありません。
系統立てて学習する時間が取れず、ググってもわからないためこちらに質問させていただきました。
現状
すでにLaravel5.7で以下のような「都道府県」セレクトボックスを含む検索フォームを作成して
動作確認もしております。
※「エリア」セレクトボックスはまだ置いていません。
(以下フォームが続く...)
[index.blade.php]都道府県の部分
<div class="row mb-2"> <div class="col-3">所在地</div> <div class="col-9"> {{ Form::select('prefecture', ['' => '都道府県'] + array_column(Config::get('const.pref'), 'name', 'id'), null) }} </div> </div><!-- //.row -->
[config/const.php]
<?php return array( 'pref' => array( array( 'id' => '01', 'name' => '北海道', 'area' => array( '0010001' => '道南エリア', '0010002' => '道央エリア', '0010003' => '道北エリア', '0010004' => '道東エリア' ), ), array( '02' => '青森県', ...
やってみたこと
Vue.js が動かせる状況まではもってこれました。
※ただし、都道府県は直書き状態です。
[index.blade.php]
<div class="row mb-2"> <div class="col-3">所在地</div> <div class="col-9"> <select v-model="selected"> <option disabled value="">都道府県</option> <option>北海道</option> <option>青森県</option> <option>秋田県</option> </select> <span>Selected: @{{ selected }}</span> </div> </div><!-- //.row -->
[resources/js/app.js]
... const app = new Vue({ el: '#app', data: { selected: '' } });
ご質問
Q1. 現状の const.php のデータを用いて「都道府県」セレクトボックスを用意する方法はありますでしょうか。
Q2. 「都道府県」を選択すると同時に「エリア」のセレクトボックスの内容を自動生成させるにはどのように書いたらよろしいでしょうか。
※今後、検索フォーム内やその他のページの様々な箇所にVue.jsを用いていきたいので拡張しやすい書き方、ファイル構成などで教えていただけると有り難いです。
Q3. Q1, 2 の前にそもそも現状の const.php の値の持ち方が適切でなければそちらも併せてご指摘ください。
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/08 08:29