Vue Js Get Selected Value from Selected Dropdown

Vue js get selected option value from selected dropdown using on change event; Through this tutorial, i am going to show you how to get selected dropdown option value in vue js application.

How to get selected value of dropdown in Vue js

Use follow the following steps and get selected dropdown option value from selected dropdown in vue js app:

Step 1 – Create New VUE JS App
Step 2 – Navigate to Vue Js App
Step 3 – Create Component
Step 4 – Add Component on App.vue

Step 1 – Create New VUE JS App

Run the following command on terminal to create new vue js app:

vue create my-app

Step 2 – Navigate to Vue Js App

Run the following command on terminal to enter your vue js app root directory:

cd my-app

Step 3 – Create Component

Go to /src/components directory and create a new component called dropdown-event.vue and add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title> How to get radio button value in vue js - Laratutorials.com </title>
    <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
    
<div id="vue-instance" class="form-group">
  <select class="form-control" @change="changeCountry($event)">
    <option value="" selected disabled>Please Select</option>
    <option v-for="country in countries" :value="country.code" :key="country.code">{{ country.name }}</option>
  </select>
  <br><br>
  <p><span>Selected country name: {{selectedCountry }}</span></p>
  <p><span>User country: {{ user.address.country }}</span></p>
</div>
    
<script type="text/javascript">
    
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.user.address.country = event.target.value
      this.selectedCountry = event.target.options[event.target.options.selectedIndex].text
    }
  }
});
</script>
     
</body>
</html>

Step 4 – Import Component on App.vue

Go to /src/ directory and App.vue file. And then add the following code into it:

<template>
    <DropdownEvent></DropdownEvent>
</template>
<script>
import DropdownEvent from './components/DropdownEvent';
export default {
  components: {
    DropdownEvent
  }
}
</script>

Conclusion

vue js get selected dropdown value with select and onchange event example. In this tutorial, you have learned how to get selected dropdown value with select in vue js app.