2

我有一个城市选择：

<select v-model="city">
    <option value="" selected>CIDADE AONDE VOCÊ ESTUDA</option>
    <option value="city1">City 1</option>
    <option value="city2">City 2</option>
    <option value="cityx">City x</option>
</select>

和一个学校选择：

<select v-model="school">
    <option
        v-for="item in schools"
        v-bind:value="item.name"
        v-bind:selected="school == item.name"
    >
        @{{ item.name }}
    </option>
</select>

这是数据（由 Laravel Blade 视图填充），可能会或可能不会与城市和学校一起出现：

data: {
    ...
    city: '{{ Input::old('city') }}',
    school: '{{ Input::old('school') }}',
    schools: [],
},

我也有一个关于城市的手表：

watch: {
    'city': '__cityChanged',
},

这是事件处理程序：

__cityChanged: function (event)
{
    this.school = '';

    this.__fetchSchools();
},

和提取器：

__fetchSchools: function (event)
{
    if (this.city)
    {
        this.$http.get('/schools/' + this.city, function (schools)
        {
            this.schools = schools;
        });
    }
},

几乎一切正常，唯一的问题是，当重新加载表单（或在验证失败时重定向回）并且已经选择了城市和学校时，它确实调用__fetchSchools并正确填写了学校选择，但它没有设置学校选择的选项，所以用户看到的是未选择的学校。

有没有办法使用 Vue 让它工作？

4

1 回答 1

0

Problem was in the __cityChanged handler, this is the fix:

__cityChanged: function (event)
{
    var city = '{{ Input::old('city') ?: (isset($subscription) ? $subscription->city : '') }}';

    if (this.city !== city)
    {
        this.school = '';
    }

    this.__fetchSchools();
},
于 2016-06-01T21:30:20.217 回答