Get Value of Selected Option in Vue.js

Published on Aug 15, 2020

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. ?

Comments (0)