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的正常分隔符。