How to dynamically create a drop-down list in Vue.js

In this tutorial you’ll learn how to create a custom drop-down list in Vue.js. It’s a common issue when you’re dealing with forms.

Suppose you have a list of job titles and you need to create a ‘job title’ select field for your website users. This field needs to be dynamic.

You also want to store selected item in your data component.

You should already know how to create a Vue.js project. Let’s skip this part.

Drop-down list in Vue.js

HTML:

<div id="app">
  <select class="form-control" @change="changeJobTitle($event)">
    <option value="" selected disabled>Choose</option>
    <option v-for="jobTitle in jobTitles" :value="jobTitle.id" :key="jobTitle.id">{{ jobTitle.name }}</option>
  </select>
  <br><br>
  <p><span>Selected job title: {{ selectedJobTitle  }}</span></p>
</div>

Vue.js

new Vue({
  el: "#app",
  data: {
    jobTitles: [
      { name: "Product designer", id: 1 },
      { name: "Full-stack developer", id: 2 },
      { name: "Product manager", id: 3 },
      { name: "Senior front-end developer", id: 4 }
    ],
    selectedJobTitle: null
  },
  methods: {
  	changeJobTitle (event) {
      this.selectedJobTitle = event.target.options[event.target.options.selectedIndex].text
    }
  }
})

Result:

As you can see we’ve got a list of 4 job titles stored in a data component. Each job title has a name and a unique id. Usually you get a JSON list of objects as an API response from your back-end server.

We then build a drop-down list using a Vue.js for-loop and assign a @change event with a changeJobTitle handler, which has a $event parameter.

On every form change changeJobTitle method is called.

methods: {
  changeJobTitle (event) {
    this.selectedJobTitle = event.target.options[event.target.options.selectedIndex].text
  }
}

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/dynamic-drop-down-list-in-vue-js

PS: Make sure you check other Vue.js tutorials, e.g. how to make a GET request in Vue.js.

Incoming search terms: