vue js get selected value of dropdown on change event example. In this tutorial, you will learn how to get selected dropdown value in vue js app.
This tutorial will guide you step by step on how to get selected dropdown value using onchange event in vue js. As well as, will make a simple example of how to get selected dropdown value in vue js app.
How to get selected value of dropdown in Vue js
Just follow the following steps and learn how to get selected dropdown value 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
In this step, open your terminal and execute the following command to create new vue js app:
vue create my-app
Step 2 – Navigate to Vue Js App
In this step, open your terminal and execute the following command to enter your vue js app root directory:
cd my-app
Step 3 – Create Component
In this step, visit /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 - Tutsmake.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 – Add Component on App.vue
In this step, visit /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.
