Get the Selected Value of a Dropdown Menu in Vue

We shall focus on how to connect Vue to a dropdown menu and get the value that was selected from the dropdown menu.

To start, in the Vue template, let us build a form that contains a drop-down menu to find out the football club that a user supports:

<template>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

To achieve getting the selected value of a dropdown menu in Vue, we will tap into the benefit of using the v-model, which makes it possible for two-way binding. With two-way binding, we would not only be able to listen to the value that a user selects from the dropdown, but we can also override a value that the user previously selected.

In your Vue project, first, add a couple of data properties in the component’s configuration object.
As the value of the dropdown item is a string, make sure to initialize it to an empty string as its initial value. Now, we can bind the dropdown menu to the data:

data() {
  return {
    club: "",
  };
},

It is with this club data property that we bind updates to the select dropdown. So that our data can detect any choice a user makes from the dropdown menu, and automatically update the value of the dropdown using v-model.

Next, we add a v-model to the dropdown menu, with a value equal to the data property we initially set - club. With this in place, the various values which are set on the dropdown options would be stored in club, whenever a user selects a different option from the dropdown menu:

<template>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club" v-model="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

Since we are dealing with a dropdown, it is often not ideal to start with an empty value for the data property that binds to the dropdown menu. In that case, we can start with a default choice, and to do that, we can have a look at the values that are stored behind the scenes and instantiate the club property to any option value of your choice:

data() {
  return {
    club: "aresnal",
  };
},

Now, you will see that "arsenal" is preselected initially on the dropdown menu, when the page is rendered on your screen.

Let us make use of string interpolation to render the club to the DOM:

<template>
  <!--string interpolation to render the club to the DOM -->
  <h3>{{ club }}</h3>
  <div class="form-control">
    <label for="club">Which football club do you support?</label>
    <select name="club" id="club" v-model="club">
      <option value="acmilan">AC Milan</option>
      <option value="liverpool">Liverpool</option>
      <option value="arsenal">Arsenal</option>
      <option value="chelsea">Chlesea</option>
      <option value="barcelona">Barcelona</option>
      <option value="realmadrid">Real Madrid</option>
    </select>
  </div>
</template>

You will see that it changes each time a user selects a different dropdown option.

That is how easy it is to get the selected value of a dropdown menu in Vue.