如何在 Vue 的 v-for 中显示带占位符的下拉列表？

Question

我想在 Vue 中显示一个下拉列表的占位符。我使用 v-for 循环遍历不同的下拉选项。

我只希望在未选择任何内容时显示占位符。如果点击下拉菜单，只显示选项“A”、“B”、“C”、“D”，不在下拉菜单中显示“请Select一个组合”。

我尝试了以下选项，但无法弄清楚如何使用 v-for 选项执行此操作？

 data () {
   comboOptions = ["A", "B", "C", D"] 
}

       <option
           v-for="option in comboOptions"
           placeholder="Please Select a Combo"
           :value="option"
           :key="option"
           >
          {{ option }}
       </option>

我不想单独对每个选项进行硬编码以使占位符看起来像

    <option :value="null" disabled>Please Select a Combo</option>
    <option value="A">A</option>
    <option value="B">B</option>

此外，我无法使用 Semantic-ui-vue 库。

我们如何做到这一点？感谢您的帮助！

Answer 1

我会这样做:

<option selected="selected" value="null" disabled>-</option>
<option v-for="agent in ticket.agents" v-bind:value="agent.agent_id">
 <span> {{agent.agent_full_name}} </span>
</option>

如何在 Vue 的 v-for 中显示带占位符的下拉列表？

How to show dropdown with placeholder in v-for in Vue?

placeholder

vue.js

dropdown

vuejs2

v-for