Vue.js动态下拉列表

Question

如何在vue中创建动态下拉列表，不知道我在做什么错误。

在我的HTML我有...

<div id="app"> 
    <select v-model="selected"> 
      <option disabled value="">Please select one</option> 
      <option v-for="item in selected"></option> 
    </select> 

和我的js的样子....

new Vue({ 
     el: '#app', 
     data: { 
      selected: ["Apache", "Cochise"], 
     } 
     }) 

过滤器看起来像这样

编辑： 这些值出现在html DOM树中在检查

而不是在下拉

Answer 1

试试这个。

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。

注意：对于未来的读者，还有一个问题，在@ captnvitman的evnironment中有text interpolation needed to be customized的正常分隔符。