Get Value of Selected Option in Vue.js

Published on August 15, 2020 33 sec read

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

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 *