How can I show objects returned by vue? The provinces are Ok, But cities v-for doesn't work.
This is My Blade :
<select v-model="ProvinceModel" name="province" id="province" class="border-radius-0 form-control padding-y-0">
<option v-for="province in provinces" value="@{{ province.id }}"> @{{ province.name }} </option>
</select>
<select name="city" id="city" class="border-radius-0 form-control padding-y-0">
<option v-for="city in cities" value="@{{ city.id }}"> @{{ city.name }} </option>
</select>
This is my scripts
new Vue({
el: '#vue',
methods: {
fetchProvinces: function () {
this.$http.get('{{url('api/provinces')}}').then(function (provinces) {
this.$set('provinces', provinces.data)
});
}
},
computed: {
cities() {
this.$http.get("{{url('api/cities')}}/" + this.ProvinceModel).then(function (cities) {
console.log(cities.data);
this.$set('cities', cities.data)
});
}
},
ready: function () {
this.fetchProvinces()
},
});
And route
Route::get('cities/{provinces_id}', function ($id = 8) {
return \App\province::find($id)->cities()->get();
})->where('id', '[0-9]+');
Computed functions should return something, and sycnchronously. You're not returning anything.
You're also attempting to set this.cities
as data, but this.cities
is already a computed function. One's gonna override the other and cause inconsistent/confusing behavior.
Fetching cities asynchronously should be a method, just like your fetchProvinces
method. You should fetch them when ProvinceModel
is changed, which you can probably do via a @change
event on the selector, or a Vue watcher on the value of ProvinceModel
.
Side note: Generally, it's best to define your data items in the component's data
parameter. If you check your JS console, Vue's likely throwing warnings about that.