Я хочу загрузить свой список провинций в компоненте vue. js, мой код работает, но когда я вхожу в систему, в моем списке ничего не отображается, вот мой код
в мой vuejs компонент:
<template>
<div class="row">
<div class="form-group required col-6">
<label for="province_id">Province</label>
<div class="col-12">
<select class="form-control" name="province_id[]" id="province_id" multiple v-model="province" style="height: 200px"
@change="getAllCities()">
<option v-for="province in provinces" :value="province.id">{{province.name}}</option>
</select>
</div>
</div>
<div class="form-group required col-6" v-if="cities.length> 0">
<label for="city_id">City</label>
<div class="col-12">
<select class="form-control" multiple="" name="city_id" id="city_id" style="height: 200px">
<option v-for="city in cities" :value="city.id">{{city.name}}</option>
</select>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
province: 'Select Province',
cities: [],
provinces: [],
flag: false,
}
},
mounted() {
axios.get('/api/provinces').then(res => {
// console.log(res);
this.provinces = res.data.provinces;
}).catch(err => {
// console.log (err)
})
},
methods: {
getAllCities: function () {
console.log()
axios.get('/api/cities/(' + this.province + ')').then(res => {
console.log(res);
this.cities = res.data.cities
}).catch(err => {
// console.log (err)
})
},
}
}
</script>
в контроллере регистра:
public function getAllProvinces()
{
$provinces=Province::all();
$response=['provinces'=>$provinces];
return response()->json($response,200);
}
мой код работает до входа в систему и показывает все провинции в моей БД, но после логина в моем списке ничего нет, помогите пожалуйста.