Vue JS Get Selected Option Text Example

By Hardik Savani | November 11, 2019 | Category : Vue.JS

In Vue JS, we will learn how to get text of selected option vue js on change event. i will give you simple example of get the text of the selected option using vue.js.

we can easily get selected text value of dropdown in vue js. i give you bellow full example of getting selected option text and value in vuejs.

In this example, we will take a simple dropdown with some options like laravel, php, codeigniter, etc. when you select it. we will get selected option text and value using on change event value vue js.


<!DOCTYPE html>



<title>Vue JS Get Selected Option Text Example -</title>

<script src=""></script>



<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>



<script type="text/javascript">

var app = new Vue({

el: '#app',

methods: {

onChange(event) {

var optionValue =;

var optionText =[].text;









I hope it can help you...

Tags : Vue.JS

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: