Laravel 5.2 Vue.js computed doesn't work

Question

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]+');

Answer 1

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.}