Get Value of Selected Option in Vue.js

Published on August 15, 2020 33 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

Hello Vue developer, in this tutorial we are going to learn how to get value of the selected option in Vue.js.

With the help of @change event, we can do it easily. Let’s take a look an example:

App.js
<template>
  <div id="app">
    <span>Category:</span>
    <select @change="selectCategory($event)" class="form-control">
      <option>--- Select ---</option>
      <option value="1">Laravel</option>
      <option value="2">Vue</option>
      <option value="3">React</option>
      <option value="4">Angular</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    selectCategory(event) {
      console.log(event.target.value);
    }
  }
}
</script>

The console output:

That’s it. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

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