Get Value of Selected Option in Vue.js

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.


Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.