如何从 html select 标签中获取 vue.js 中的值？

Question

我试图获取 vue.js 中 select 区域的值，但我得到一个空值。

 alert(this.property_credentials.district);

关于如何从 select 中获取价值的任何建议？

 <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. 这是一个工作 JS Fiddle 用于简单的 html select 标签。

现在你的问题

好吧，我不认为 vue 没有 selecting 有问题。一定有一个非常小的问题需要您解决。（因为我看不到您的 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' ]}
      ]

    }
  }
})

如何从 html select 标签中获取 vue.js 中的值？

How to get value in vue.js from html select tag?

vue.js

vuejs2