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.
haw cn get all element for option like if i have option named color i wanna to get all colors with color red .thanks
Hey! Could you share your code? It’s not clear if you have an array of objects or just an array of colours.
Very helpful.
Awesome!
I have read throught his article and it was just close to what im looking for. I will be glad is you can help with something like this.
https://www.w3schools.com/howto/howto_css_subnav.asp
Cool, thanks, simplified a little
HTML:
++++++++++++++++++++++++
Choose
{{ index + 1 }} – {{ jobTitle.name }}
Selected job title: {{ selectedJobTitle }}
++++++++++++++++++++++++
Vue3.js:
+++++++++++++++++++++++
const app = Vue.createApp({
data() {
return {
jobTitles: [
{ name: “Product designer” },
{ name: “Full-stack developer” },
{ name: “Product manager” },
{ name: “Senior front-end developer” }
],
selectedJobTitle: null
};
},
methods: {
changeJobTitle(event) {
this.selectedJobTitle = event.target.options[event.target.options.selectedIndex].text;
}
}
});
app.mount(‘#dropDown’);
+++++++++++++++++++++++
This is actually brilliant