You can get a selected value in a select element in VueJs in two ways. First using the v-model directive to bind the selected option of a < select > element to a data property. Second, you can listen to the change event on a select element to get the latest selected value. Heres are the examples for both options.
<template> <div> <select v-model="selectedOption" @change="logSelectedOption"> <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: null, }; }, methods: { logSelectedOption() { console.log('Selected Option:', this.selectedOption); }, }, }; </script>
<template> <div> <select @change="logSelectedOption($event)"> <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: null, }; }, methods: { logSelectedOption(value) { console.log('Selected Option:', value); this.selectedOption = value; }, }, }; </script>