Vue 2 Get Selected Value from Selected Dropdown Tutorial

Vue js get selected value from select box tutorial; Throughout this quick tutorial, you will come to know how to easily get selected value of a select dropdown in Vue Js using a simple technique.

Select box is an awesome UI element; it is a horizontal box that allows your site visitors to choose a single option from the dropdown list; a primary form element especially used to gather user input; values are known as options in the select box.

This whole Vue dropdown select example revolves around a simple idea to select box selected option value using the onChange event handler.

The event handlers play a major role in Vue to handle events; consequently, we need to use the on-change method to get selected values of a select box.

Here is the simple road map; we will install a basic vue app using vue cli, head over to vue component, create an options list in vue select dropdown box, create a simple function, bind it with Vue’s on-change event and get the selected value of a select box.

Install Vue Application

If you haven’t created a Vue app, then fret not; here is the simple command to install the vue app. You may skip the below instruction if you have already gone through this step.

vue create vue-demo-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Bootstrap is a little off the topic, Not needed; nevertheless, we are using it to style the select box, which may drastically reduce the time that may go into designing the UI elements.

npm install bootstrap

Next, 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')

Get Selected Value of Select Dropdown in Vue

We have taken the agile steps to form the select dropdown and get values from the select dropdown using on change event handler.

• Created a select box inside the template syntax.
• Added an onChange() event handler.
• Created an options list, cars name primarily.
• Used the on-change method to grab the selected value using the event object.

Update the 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>

Start Vue App

Ultimately, we have finalized what we promised; now, it’s time to check the micro nuances of the vue select box example.

npm run serve

Your terminal provide you the app url, use the link to view the app on the browser.

http://localhost:8080

Conclusion

We have completed this tutorial; one thing is for sure if you are new to Vue development, this quick guide is no less than a prodigy. Often, we see you get stuck a lot when you are a novice, even if how small the concepts are.

Through this step-by-step example, we have tried to reduce the excruciating pain of a novice developer; we hope you liked this little vue select box tutorial.