Wie bekomme ich einen Wert in vue.js vom html select tag?

Question

Ich versuche, Wert der ausgewählten Region in vue.js zu erhalten, aber ich bekomme einen leeren Wert.

alert(this.property_credentials.district); 

Jeder Vorschlag, wie kann ich Wert von wählen?

<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true"> 
               <option value="0">--Please select your district</option> 
               <optgroup v-for='district in districts' label="@{{district.district}}"> 
               <option v-for='region in district.regions' value="@{{region}}" >@{{region}}</option> 
               </optgroup> 
        </select> 

Answer 1

1. Hier ist ein funktionierendes JS Fiddle für die aktuelle Frage.

2. Hier ist eine funktionierende JS Fiddle für einfache html select tag.

jetzt Ihre Frage

Nun, ich glaube nicht, gibt es ein Problem mit vue nicht auswählen. Es muss ein sehr kleines Problem geben, das Sie beheben müssen. (Da ich Ihren JavaScript-Code nicht sehen kann, nehme ich an, dass es in Ihrem Javascript ist).

<div id="app"> 
<select v-model="property_credentials.district" name="district" > 
    <option value="0">--Please select your district</option> 
    <optgroup v-for='district in districts'> 
    <option v-for="region in district.regions" :value="region">{{ region }}</option> 
    </optgroup> 
</select> 
<br> 
Selected value is : {{ property_credentials.district }} 
</div> 

new Vue({ 
    el: '#app', 
    data: function(){ 
    return { 
     property_credentials: { 
     district: '' 
     }, 
     districts: [ 
     {district: 'x', regions: [ 'a', 'b', 'c', 'd' ]} 
     ] 

    } 
    } 
})