Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs dropdown

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

You can connect a dropbox to a Vue array.

This makes it dynamic: if all of the data comes from JavaScript you could either fetch it using an Ajax request or define it in the array. But the good thing is you don’t have to think about the template if you want to change the data.

vuejs dropdown example

The example below creates a dropdown box that fetches the array from the Vue app.

Template

In your app define the select input thats linked to the array.

<div id="app">
<select v-for="color in colors"
v-model="color.selectedOption">
<option v-for="option in color.options" :value="option">

</option>
</select>
</div>

App.js

Inside your Vue instance you define your array. To keep a clear overview of your app, you could define it outside of your Vue instance.

console.clear()

const colors = [
{
options:["red", "yellow", "green"],
selectedOption: "yellow"
}
]

new Vue({
el:"#app",
data:{
colors
}
})

Download Vue.js Examples


← vuejs class Examples →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy