How to get selected value on @change using Vue.js

in Code Write a comment

In this tutorial, I’ll show you how to get selected option from a dropdown list in Vue.js.

Suppose you have a user settings form, which has a country field. And you want to get selected value and assign it to the data component or perform some other actions.

Example using Vue.js

In Vue.js you can create your select options dynamically. Here we have a dynamic dropdown list of countries.

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

In Vue.js each option must have a unique :key attribute. We’re using country codes as unique keys, e.g. GB, US or whatever format you prefer.

Our country field has a @change event, which has a changeCountry handler with an $event parameter.

On every field change changeCountry method is called. As you can see below, we simply assign the selected option to the user country field.

changeCountry (event) { =

Hi, I'm Renat 👋


The advantages of using @change event instead of v-model binding

You might think how is it better than using v-model binding. The difference is that you can check user form for errors, assign it to multiple data components without using Vue.js watchers and so on.

Full example


<div id="vue-instance">
  <select class="form-control" @change="changeCountry($event)">
    <option value="" selected disabled>Choose</option>
    <option v-for="country in countries" :value="country.code" :key="country.code">{{ }}</option>
  <p><span>Selected country name: {{selectedCountry }}</span></p>
  <p><span>User country: {{ }}</span></p>


var vm = new Vue({
  el: '#vue-instance',
  data: {
    countries: [
      { code: 'GB', name: 'Great Britain' },
      { code: 'US', name: 'United States' },
      { code: 'KZ', name: 'Kazakhstan' }
    selectedCountry: null,
    user: {
    	address: {
      	country: null
  methods: {
    changeCountry (event) { =
      this.selectedCountry =[].text

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

Want to share this with your friends?
👉[email protected]

PS: Make sure you check other posts e.g. how to check if a user has scrolled to the bottom in Vue.js, how to do Vue.js polling using setInterval() and JavaScript/Vue.js print object in the console.

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

Get now

Write a Comment



  1. Yes, this is nice.. but I have a doubt regarding this.. If we want to show the selected value in the dropdown, how should we assign the value to the dropdown? (We trigger the on-change method when we change the dropdown value. How to do vice-versa? i.e; assign the selected value to the dropdown)