html select 태그에서 vue.js 값을 얻는 방법

html select 태그에서 vue.js 값을 얻는 방법

vue.js에서 select region 값을 가져오려고 하는데 빈 값이 나타납니다.

 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>

1. 현재 질문에 대한 JS Fielle을 소개합니다.

2. 이것은 간단한 html select 태그에 대해 작동하는 JS Fielle입니다.

지금 바로 질문

음, 저는 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' ]}
      ]

    }
  }
})

언급URL : https://stackoverflow.com/questions/42046500/how-to-get-value-in-vue-js-from-html-select-tag