Wie wird die ausgewählte Option für eine dynamisch geladene Sekundärauswahl mit VueJS eingestellt?

Question

Ich habe eine Stadt auswählen:

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

Und aa Schule wählen:

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

Das sind die Daten (gefüllt mit einer Laravel Klinge Ansicht), die mit einer Stadt oder auch nicht kommen und eine Schule:

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

ich habe auch eine Uhr auf Stadt:

Dies ist der Event-Handler:

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

    this.__fetchSchools(); 
}, 

Und die Abholer:

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

Fast alles funktioniert gut, das einzige Problem ist, wenn das Formular neu geladen wird (oder wieder auf eine gescheiterte umgeleitet Validierung) und Stadt und eine Schule sind bereits ausgewählt, es ruft die __fetchSchools und füllen Sie die Schulen richtig auswählen, aber es stellt nicht die Schule ausgewählte Option, so was der Benutzer sieht, ist die Schule nicht ausgewählt.

Gibt es eine Möglichkeit, es mit Vue arbeiten zu lassen?

Answer 1

Problem in dem __cityChanged Handler war, ist dies die fix:

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

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

    this.__fetchSchools(); 
},