我想做一个动态的依赖下拉列表(当我在第一个选择中选择一个Chantier时,第二个选择将填充Chantier的输出)
我想做一个动态的依赖下拉列表(当我在第一个选择中选择一个Chantier时,第二个选择将填充Chantier的输出)
SalarieController
public function getChantier()
{
$data = Chantier::get();
return response()->json($data);
}
public function getOuvrage(Request $request)
{
$data = State::where('chantier_id', $request->chantier_id)->get();
return response()->json($data);
}路由\api
Route::get('getChantier', 'SalariesController@getChantier');
Route::get('getOuvrage', 'SalariesController@getOuvrage');Route\wep.php
Route::get('payer', function () {
return view('salarie.payer');
});paye.blade.php
<div class="card-body">
<div class="form-group">
<label>Chantier:</label>
<select class='form-control' v-model='chantier' @change='getOuvrage()'>
<option value='0' >Select Country</option>
<option v-for='data in chantiers' :value='data.id'>{{ data.chantier }}</option>
</select>
</div>
<div class="form-group">
<label>Select State:</label>
<select class='form-control' v-model='state'>
<option value='0' >Select State</option>
<option v-for='data in ouvrages' :value='data.id'>{{ data.ouvrage }}</option>
</select>
</div>
</div>vuejs
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
chantier: 0,
chantiers: [],
ouvrage: 0,
ouvrages: []
}
},
methods:{
getChantier: function(){
axios.get('/api/getChantier')
.then(function (response) {
this.chantiers = response.data;
}.bind(this));
},
getOuvrage: function() {
axios.get('/api/getOuvrage',{
params: {
chantier_id: this.chantier
}
}).then(function(response){
this.ouvrages = response.data;
}.bind(this));
}
},
created: function(){
this.getChantier()
}}
发布于 2019-07-13 04:21:58
问题在{{ data.chantier }}上。我假设您正在使用Vue处理它,但您必须告诉Blade忽略那些大括号,否则,它将尝试将其输出为一个不存在的php值。
将{{ data.chantier }}替换为@{{ data.chantier }},它应该可以做到这一点。
https://stackoverflow.com/questions/57015824
复制相似问题