Vue.js dynamic dropdown menu
How do I make a dynamic dropdown menu but not sure what I am doing wrong.
in my html i have ...
<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option v-for="item in selected"></option>
</select>
and my js looks like ....
new Vue({
el: '#app',
data: {
selected: ["Apache", "Cochise"],
}
})
look like this:
EDIT: Values are displayed in html DOM tree in inspector
but not in the dropdown menu
+3
captnvitman
source
to share
1 answer
Try it.
new Vue({
el: '#app',
data: {
filters: filters,
selectedValue: null
}
})
<div id="app">
<select v-model="selectedValue">
<option disabled value="">Please select one</option>
<option v-for="item in filters" :value="item">{{item}}</option>
</select>
</div>
An example .
Note . There was also a problem for future readers where the usual delimiters for text interpolation needed to be configured in @captnvitman evnironment.
+4
Bert
source
to share