0
私は2つのテーブル:国と都市を持っています。ユーザーが国を選択して選択した国に対応する都市を入力すると、2番目のドロップダウンが表示されます。Vue.jsリクエストからLaravel 5.3フォームへのデータの受け渡し
残念ながら、検索された値をフォームに渡す方法がわかりません。検索
値は、ID 21と国の下にあるノルウェー:)
選択した{ "国" であり、 "21"、 "CountrySelected":真、 "都市":{ "6": "オスロ"、 "11": "リレハンメル"}}
// My app.js
const app = new Vue({
el: '#events',
data: {
\t \t country:'',
\t \t CountrySelected: false, \t
\t \t cities:[], \t
},
methods: {
\t \t WhenCountryHasBeenSelected: function(event) {
\t \t \t this.getCities();
\t \t \t this.CountrySelected= true;
\t \t },
\t \t getCities: function(){
\t \t \t this.$http.get('api/cities/'+this.country).then(function (response) {
this.cities = response.data;
});
}
},
})
//My api.php routes
Route::get('/cities/{country_id}', function (Request $request, $country_id) {
\t \t
$cities=App\City::where('country_id', $country_id)->get()->pluck('name','id');
return $cities;
});
//My blade file
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="events">
<div class="panel panel-default">
<div class="panel-heading">Select cities by country</div>
<div class="panel-body">
{!! Form::open() !!}
{!! Form::select('country', $countries, null, ['v-model'=>'country', '@change'=>'WhenCountryHasBeenSelected' ,'class'=>'form-control']) !!}
<div v-show="CountrySelected">
{!! Form::select('city',$cities, null, ['class'=>'form-control']) !!}
{!! Form::close() !!}
Selected @{{ $data | json }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection