How to Get Value of Selected Option in Vue JS?

May 2, 2020 | Category : Vue.js

This post will give you example of get selected value of dropdown in vuejs. if you want to see example of get select box selected value vue js then you are a right place. This article will give you simple example of vuejs onchange get value. i would like to share with you vuejs get selected option value. follow bellow step for vue js get selected option text.

We can get selected value of select box using onchange event in vue.js. we will create one vue js function that will call with on change of select box option. you can see bellow full example, that will help you to understand how works onchange event to get value of selected option.

You can see bellow full example:

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Dropdown Selected Value Example - HDTuto.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">PHP</option>
     <option value="2">Laravel</option>
     <option value="3">Codeigniter</option>
     <option value="4">Vue JS</option>
     <option value="5">Angular JS</option>
  </select>
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              console.log(event.target.value);
          }
      }
    })
  
</script>
   
</body>
</html>

Output:

2
3

I hope it can help you...

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles