How to Get Selected Option Text in Vue JS ?

Share Me

Hi Developer,
Hope all are feeling good. Today I will show you how to get text from selected option vuejs by using on change event. Here i will give you a short and a very simple example of how to get the text from the selected option by using vue.js.

So we can easily get selected text value from dropdown in vue js ap.So i will give you bellow a full example of getting selected option text and value in vuejs app.

Now in this example, i will take a simple dropdown with some options like USA, India, Bangladesh, etc. when We will select it. So i will get selected option text and value by using on change event function on value vue js.


<!DOCTYPE html>
    <title>How to Get Selected Option Text in Vue JS ? -</title>
    <script src=""></script>
<div id="app">
  <select name="category_id" @change="onChange($event)" class="form-control">
     <option>--- Select Category ---</option>
     <option value="1">USA</option>
     <option value="2">India</option>
     <option value="3">Bangladesh</option>
     <option value="4">England</option>

<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              var optionValue =;
              var optionText =[].text;

Read Also : Get Checked Radio Button Value in Vue JS

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →