In Vue, you can get the selected text from a dropdown menu using the v-model
directive and the event.target
object. Here’s an example:
<template>
<div>
<select v-model="selectedOption" @change="getOptionText">
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
};
},
methods: {
getOptionText(event) {
const selectedIndex = event.target.selectedIndex;
const selectedOptionText = event.target.options[selectedIndex].text;
console.log(`Selected option text: ${selectedOptionText}`);
},
},
};
</script>
In this example, we have a dropdown menu with three options. The v-model
directive binds the selectedOption
data property to the value of the selected option. The getOptionText
method is called when the dropdown menu value changes. The event.target
object contains information about the target of the event, which in this case is the select element. We get the selected index using event.target.selectedIndex
and then get the selected option text using event.target.options[selectedIndex].text
. We then log the selected option text to the console.