Ajax 如何使用VueJS在动态加载的辅助选择上设置选定选项？

我有一个城市选择：

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

我还有一块手表在城市：

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

几乎一切正常，唯一的问题是，当表单被重新加载（或在验证失败时重定向回）并且城市和学校已经被选中时，它会调用

\u fetchSchools

并正确填写学校选择，但它没有设置学校选择选项，因此，用户看到的是未选中的学校

---

有没有办法使用Vue使其工作？

问题出现在

\uu cityChanged

处理程序中，以下是修复方法：

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

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

    this.__fetchSchools();
},

---

旁注：

school:'{{Input:：old（'school'）}}'，

将在学校名称中出现

'

时中断<代码>学校：{！！json_encode（输入：：old（'school'））！！}，将使其安全。城市名称也是一样。不是，我忘了说这是一个拉威尔的东西，但是，它起作用了。谢谢。这听起来像是国家管理部门的工作。检查

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

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

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

    this.__fetchSchools();
},