Vue 2 Tutorial- How To get Selected Value From Selected Dropdown Example

Vue js Get Selected Value from Select Box Tutorial; In this Vue js guide, we would learn how to get the selected value of a select dropdown in Vue Js using a simple technique.

 

Some of us already know that a Select Box is an important UI element since it allows our site visitors to choose a single option from the given dropdown list. The values are known as options in the select box. We will be learning to get the selected option value using the onChange event holder.

 

The event handlers play a very important role in Vue handling events. There is a very simple way to do so. We will have to install a basic Vue app using the Vue CLI, then we head over to the Vue component, create an options list in Vue select dropdown box, create a simple function, and bind it with Vue’s on-change event and get the selected value of a select box.

Let’s see step-by-step now how to do it:

 

How To Get The Selected Value From Selected Dropdown Tutorial

Step 1- Install Vue App

Step 2- Get Selected Value Of Select Dropdown In Vue

Step 3- Start Vue App

 

Step 1- Install Vue Application

The very basic step for starting with the implementation is just to install Vue app using the below- given command:

vue create vue-demo-app

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

The Bootstrap is a little off the topic. But we will be using it to style the select box. This will help in saving a lot of time that would otherwise be wasted in designing the UI elements. So, let’s install the bootstrap next:

npm install bootstrap

Further, we need to insert the bootstrap CSS path and update the src/main.js file:

import Vue from 'vue'
import App from './App.vue'
// Import Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
new Vue({
  render: h => h(App),
}).$mount('#app')

 

Step 2- Get Selected Value Of Select Dropdown In Vue

See the below steps to form the select dropdown and get values from the select dropdown using on change event handler:

  • To create a select box inside the template syntax.
  • To add an onChange() event handler.
  • To create an options list.
  • To see the on-change method to grab the selected value using the event object.

Then, we update the below code in Vue component file:

<template>
  <div>
    <h2>Vue Js Dropdown Get Seelcted Value</h2>
    <select name="cars_id" @change="onChange($event)" class="form-select form-control">
        <option>---- Select Car ----</option>
        <option value="sonata_hybrid">Sonata Hybrid</option>
        <option value="odyssey">Odyssey</option>
        <option value="ford_mustang">Ford Mustang</option>
        <option value="tesla_model">Tesla Model 3</option>
        <option value="honda_accord">Honda Accord</option>
        <option value="ford_expedition">Ford Expedition</option>
        <option value="lincoln_navigator">Lincoln Navigator</option>
    </select>
  
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
         onChange(e) {
              console.log(e.target.value);
          }
    };
  }
};
</script>

 

Step 3- Start Vue App

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have completed this Vue tutorial. We have tried our best to explain everything in a very easy manner.

Hope that you liked and understood this Vue tutorial well.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *