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

如何解决如何在 Vue 的 v-for 中使用占位符显示下拉列表？

我想在 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 库。

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

解决方法

我会这样做：

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