How to get value in selected dropdown in vue.js?
How to get value in selected dropdown in vue.js?
1 answer
by
darrion.kuhn ,
4 months ago
@darion
To get the value of a selected option in a dropdown in Vue.js, you can use the v-model directive to bind the selected value to a data property in your component. Here's an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<template>
<div>
<select v-model="selectedOption">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button @click="getValue">Get Selected Value</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: null
};
},
methods: {
getValue() {
alert(this.selectedOption);
}
}
};
</script>
|
In this example, we have a dropdown with three options and a button that triggers the getValue method when clicked. The v-model="selectedOption" directive binds the selected option value to the selectedOption data property. When the button is clicked, the getValue method is called, which will display an alert with the selected option value.