In this article, we’ll see how we can get the value of the selected option from a select input in Vue 3. There are multiple ways to achieve this. In this example, we’re going to do it the native way.

Here’s the code example to demonstrate the idea:

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const onSelectChange = (e) => {
  selectedValue.value = e.target.value
}
</script>

<template>
<div>
  <label for="gender-selection">Select gender</label>
<select
  name="gender-selection"
  @change="onSelectChange(e)"
  v-model="selectedValue"
>
  <option value="0">Male</option>
  <option value="1">Female</option>
  <option value="2">Other</option>
</select>
  <p>Selected value: {{selectedValue}}</p>
</div>
</template>

Code language: HTML, XML (xml)

In the above code, we have a onSelectChange method on line 6. We call this method whenever there’s a selection event in the select input field. In line 16, we’ve bind the method with the @change event listener.

We get the selection value from e.target.value and assign it to selectedValue.

You can find a working example of the above code from my repos below:

Codesandbox / Demo | Giithub