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

Question

I want to show a placeholder for a dropdown in Vue. I use a v-for loop to go through different dropdown options.

I only want the placeholder to show when nothing has been selected. If the dropdown is clicked, only show the options "A", "B", "C", "D", and do not show "Please Select a Combo" in the dropdown.

I tried the options below, but can't figure out how to do this with the v-for option?

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

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

I don't want to hardcode each option individually to make the placeholder appear like

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

Also, I can't use the Semantic-ui-vue library.

How do we do this? Thanks for the help!

Answer 1

i would do it like this :

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