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

in Code Write a comment

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">
  <select @change="changeCountry($event)">
    <option value="" selected disabled>Choose</option>
    <option v-for="country in countries" :value="country.code" :key="country.code" :selected="">{{ }}</option>

Hi, I'm Renat 👋


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. 
Renat Galyamov

Want to share this with your friends?

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).

Incoming search terms:

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment