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

Solution

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.

Comments

[captnvitman]

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]

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

[Bert]

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

[captnvitman]

from an ajax call, however I changed it to filters: ['Apache','Cochise'] like in your example to keep it simple. I'll edit my question to reflect that

[captnvitman]

I switched to the same version to check, still the same problem. perhaps its another library im using like bootstrap that is messing with it

[Bert]

@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]

i have it like this <option v-for="item in filters" :value="item">{{item}}</option> ... still no luck

[Bert]

Let us continue this discussion in chat.

[captnvitman]

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