如何在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>