Laravel 5.2 Vue.js 计算无效

Question

如何显示 vue 返回的对象？省份可以，但是城市 v-for 不工作。

这是我的刀刃：

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

这是我的脚本

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()
        },
    });

和路线

Route::get('cities/{provinces_id}', function ($id = 8) {
    return \App\province::find($id)->cities()->get();
})->where('id', '[0-9]+');

Answer 1

Vuejs不灵活，可以通过jquery取值，传给control。 Element by ref 方法很好。

Vuejs 不能等待 worker，当它忙时，所以当它不在值时自然变量显示未定义。

Answer 2

计算函数应该 return 一些东西，并且是同步的。你没有 returning 任何东西。

您还试图将 this.cities 设置为数据，但 this.cities 已经是一个计算函数。一个会覆盖另一个并导致 inconsistent/confusing 行为。

异步获取城市应该是一种方法，就像您的 fetchProvinces 方法一样。您应该在 ProvinceModel 更改时获取它们，您可以通过选择器上的 @change 事件或 ProvinceModel.

值上的 Vue 观察器来获取它们

^{旁注：通常，最好在组件的 data 参数中定义数据项。如果你检查你的 JS 控制台，Vue 可能会发出警告。}

Laravel 5.2 Vue.js 计算无效

Laravel 5.2 Vue.js computed doesn't work

laravel

vue.js

laravel-5.1

laravel-5.2

vue-resource