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获取value，传给control。引用元素的方法很好。

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

Answer 2

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

您还尝试将this.cities 设置为数据，但this.cities 已经是一个计算函数。一个会覆盖另一个并导致不一致/令人困惑的行为。

异步获取城市应该是一种方法，就像您的fetchProvinces 方法一样。你应该在ProvinceModel 改变时获取它们，你可以通过选择器上的@change 事件或ProvinceModel 的值上的Vue 观察器来实现。

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