如何在Vue的v-for中显示带有占位符的下拉菜单？

Question

我想在 Vue 中显示一个下拉菜单的占位符。我使用 v-for 循环来浏览不同的下拉选项。

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

我尝试了以下选项，但不知道如何使用 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>