javascript - 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 .

注意:对于 future 的读者，还有一个问题是 text interpolation needed to be customized 的正常分隔符在@captnvitman 的环境中。