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:

<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: