CODEWITHSUNDEEP
vuejs2vue.js
None
None

Reputation: 9247

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

Im trying to get value of select region in vue.js but i get an empty value.

 alert(this.property_credentials.district);

Any suggestion how can i get value from 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>

Upvotes: 3

Views: 13356

Answers (1)

Rehan Manzoor
Rehan Manzoor

Reputation: 2753

1. Here is a working JS Fiddle for the current question.

2. Here is a working JS Fiddle for simple html select tag.

Now Your Question

Well i don't think there is a problem with vue not selecting. There must be a very small issue which you need to fix.(Since i cannot see your javascript code, so I'm assuming it's in your 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' ]}
      ]

    }
  }
})

Upvotes: 7

Related Questions