How to set a default value for an HTML <select> tag in Vue.js

In this tutorial, you’ll learn how to select the default value for an HTML <select> element in Vue.js.

If you’re not using any Vue.js frameworks you can build your own custom HTML elements.

<div class="form-group">
  <label>Countries</label>
  <select @change="changeCountry($event)">
    <option value="" selected disabled>Choose</option>
    <option v-for="country in countries" :value="country.code" :key="country.code" :selected="user.country==country.code">{{ country.name }}</option>
  </select>
</div>

You can add selected attribute for the option you want to be the default. In the example above we’ve added a default, disabled value "Choose".

<option value="" selected disabled>Choose</option>

If you want to learn how to dynamically create a select list click here.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/default-select-value-vue-js

PS: Make sure you check other Vue.js tutorials, e.g. how to make router parameter optional in Vue.js or Top 5 CSS frameworks for your Vue.js project (2019).