如何从html选择标签获取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

这里是当前问题工作JS Fiddle。

2.这是一个工作JS Fiddle为简单的html选择标记。

现在您的问题

嗯，我不认为这是与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' ]} 
     ] 

    } 
    } 
})