How to get the selected value from the dropdown in Vue JS?

In Vue, you can get the selected value from a dropdown by using the v-model directive. The v-model directive binds the value of the input or dropdown to a data property in your Vue instance, so you can easily get the selected value in your component’s methods or computed properties.

Here’s an example of how to get the selected value from a dropdown in Vue:

<template>
  <div>
    <select v-model="selectedOption" @change="onSelectOption">
      <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>
    <p>You selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    };
  },
  methods: {
    onSelectOption() {
      console.log(this.selectedOption);
    },
  },
};
</script>

In this example, we’re using the v-model directive to bind the selected value to the selectedOption data property. We’re also using the @change event to call the onSelectOption method when the dropdown selection changes. In the onSelectOption method, we’re logging the selected value to the console. Finally, we’re displaying the selected value in the template using interpolation.

You can use the same approach to get the selected value from any type of dropdown or input in Vue, including radio buttons and checkboxes. Just make sure to use the appropriate input type and update the v-model and @change directives accordingly.