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>

例子.

注意:对于未来的读者,还存在一个问题,即文本插值的常规分隔符需要在@ captnvitman的evnironment中进行自定义.