How to Get Selected Option Text in Vue JS ?

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.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How to Get Selected Option Text in Vue JS ? - Codingspoint.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">USA</option>
     <option value="2">India</option>
     <option value="3">Bangladesh</option>
     <option value="4">England</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>

Read Also : Get Checked Radio Button Value in Vue JS

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

close

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 →