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>

我的JavaScript代码看起来像这样...

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

过滤器长这样： 编辑： 这些值出现在检查器中的HTML DOM树中： 但不会显示在下拉菜单中：

- captnvitman

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的环境中也存在一个问题，即文本插值的正常分隔符需要进行自定义设置。

- Bert

---

除了下拉菜单中没有显示选项之外，大部分都可以正常工作。我已经编辑了我的问题并附上了图片以说明我的意思。 - captnvitman

@captnvitman，filters是从哪里来的？你能提供一下你看到这个东西的链接吗？在示例中它是有效的。 - Bert

@captnvitman 看起来你忘了在 <option></option> 中添加 {{item}}。如果你看一下屏幕截图，有一个 value 但没有文本。 - Bert

我像这样写：<option v-for="item in filters" :value="item">{{item}}</option> ... 仍然没有成功。 - captnvitman

对于未来遇到同样问题的任何人，这是一个分隔符的问题（可能与Django模板混淆了？）在新的Vue()中设置分隔符：['${', '}']，并使用${}进行Vue模板。感谢@Bert Evans。 - captnvitman