Get Value From Selected Dropdown in Vue.js

Get Value From Selected Dropdown in Vue.js

In this post, I will let you know how to get selected option value of dropdown in Vue.js. You can get select box selected value using Vuejs onchange event.

In this post, I will let you know how to get selected option value of dropdown in Vue.js. You can get select box selected value using Vuejs onchange event.

Bellow example you will understand how to get dropdown selected value in Vue.js.

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 - ItSolutionStuff.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...

vue-js javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.