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.

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

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 →