Vue.js get selected option on @change

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.

1. With v-model

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

2. With @change event

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