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

Answer 1

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.