Published - | Updated - May 8, 2021 12:10 am
177 Views
In this article, we will show you selected option text example in vue js. This article will give you simple example of selected option text example in vue js.
we can easily selected option text example in vue js. In this example, we will take a simple dropdown with some options like laravel, php, codeigniter, etc. when you select it. we will selected option text example in vue js.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Selected Option Text Example In Vue JS - codeplaners.com</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<select name="category_id" @change="onChange($event)" class="form-control">
<option>--- Select Category ---</option>
<option value="1">PHP</option>
<option value="2">Laravel</option>
<option value="3">Codeigniter</option>
<option value="4">Vue JS</option>
<option value="5">Angular JS</option>
</select>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
onChange(event) {
var optionValue = event.target.value;
var optionText = event.target.options[event.target.options.selectedIndex].text;
console.log(optionText);
console.log(optionValue);
}
}
})
</script>
</body>
</html>