Home Javascript How to Get Selected Option Text in Vue JS ?

How to Get Selected Option Text in Vue JS ?

by Shahriar Sagor

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. Here you know about how to Get Selected Option Text in Vue.

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 ? - Codingspoint.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></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 = event.target.value;
              var optionText = event.target.options[event.target.options.selectedIndex].text;

Read Also : Get Checked Radio Button Value in Vue JS

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


You may also like