CODEWITHSUNDEEP
htmlvue.js
Babr
Babr

Reputation: 2081

How to set default value in select box in Vue.js?

This may be trivial but I could not make a select box in Vue.js template to show US as default (that is before the drop down being clicked)

<select v-model="country">                                           
    <option selected="selected">US</option>
    <option>UK</option>
    <option>EU</option>
</select>

The problem is that selector appears blank before being clicked whatever I try.

How can I fix it?

Upvotes: 3

Views: 11001

Answers (1)

Phil
Phil

Reputation: 164736

See Form Input Bindings - Select. You just need to set your bound v-model property to the appropriate value.

Here's an example...

new Vue({
  el: '#app',
  data: {
    country: 'US'
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <select v-model="country">
    <!-- as recommended by Vue -->
    <option disabled value="">Please select one</option>
    <option>US</option>
    <option>UK</option>
    <option>EU</option>
  </select>
  
  <pre>Selected country: {{ country }}</pre>
</div>

Upvotes: 5

Related Questions