Vue.js dynamic dropdown

Question

How would I make a dynamic dropdown in vue, 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"],
        }
      })

filters looks like this

EDIT: the values appear in the html DOM tree in the inspector

but not in the dropdown

tony19 · Accepted Answer · 2022-07-15 20:24:20Z

9

Try this.

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>

Example.

Note: For future readers, there was also an issue where the normal delimiters for text interpolation needed to be customized in @captnvitman's evnironment.

edited Jul 15, 2022 at 20:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 3, 2017 at 20:41

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

captnvitman Over a year ago

that work mostly, except for the options do not show in the dropdown, I edited my question with pictures to show what I mean

Bert Over a year ago

@captnvitman where does filters come from? And can you link where you are seeing this? It works in the example.

Bert Over a year ago

@captnvitman possibly a version issue? I am using Vue 2 in the example.

Bert Over a year ago

@captnvitman It looks like you forgot to add {{item}} inside the <option></option>. If you look at your screenshot, there is a value but no text.

captnvitman Over a year ago

for anyone looking at this in the future with the same problem, it was a problem with the delimiters (maybe getting confused with the django templating?) set delimiters: ['${', '}'], in new Vue () and use ${} for vue templating. thanks to @Bert Evans

|

Collectives™ on Stack Overflow

Vue.js dynamic dropdown

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related