Vue.js get dropdown selected value
You can get seelcted text or selected option value of a select box in vue.js using v-model. Here in this tutorial, we are going to explain how you can get selected option value and text in vue.js. You can use our online editor to edit and run the code online.
Vue.js get dropdown selected value JavaScript
Here is an example of simple dropdown options-
Example:
<div id="app">
<select v-model="myModel">
<option v-for="myOption in myOptions" :value="myOption">{{ myOption.text }}</option>
</select>
<p>
Selected Text = {{ myModel.text }}<br>
Selected Option Value = {{myModel.value}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myModel:{},
myOption:{},
myOptions: [
{ value: 1, text: 'Option 1' },
{ value: 2, text: 'Option 2' },
{ value: 3, text: 'Option 3' },
{ value: 4, text: 'Option 4' },
]
}
});
</script>
|
Output of above example-
Advertisements
