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

Question

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?

I made a file that has the same structure as yours, and it appears selected for me. — Jack Bashford
– Jack Bashford, Commented Sep 7, 2018 at 4:49
Please notice, I'm taliking about vue.js template not ordinary html. — Babr
– Babr, Commented Sep 7, 2018 at 4:50
OK, will test with Vue. What's the URL of the file you're using? — Jack Bashford
– Jack Bashford, Commented Sep 7, 2018 at 4:50

tony19 · Accepted Answer · 2022-07-15 21:28:15Z

5

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>

edited Jul 15, 2022 at 21:28

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 7, 2018 at 5:03

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Babr Over a year ago

I had tried that. Still US does not appear on the selector bar.

Phil Over a year ago

@Babr can you add your JavaScript code to your question? How and where do you assign a value to country?

Babr Over a year ago

Sorry Phil, stupid me! I had put country outside data! Thanks for the tip.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related