hue selectタグからvue.jsの値を取得するには？

Question

私はvue.jsで選択領域の値を取得しようとしていますが、空の値が得られます。

alert(this.property_credentials.district); 

どのように私は選択から価値を得ることができますか？ここで

<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.現在の質問のために働いてJS Fiddleです。

2.単純なhtml selectタグの場合はJS Fiddleとなります。

今すぐあなたの質問

さて私はVUEは選択しないとの問題があるとは思いません。 （あなたのjavascriptコードを見ることができないので、私はそれがあなたのjavascriptにあると仮定しています）修正する必要がある非常に小さな問題がなければなりません。

<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' ]} 
     ] 

    } 
    } 
})