I've been experimenting with Vue to create a select list using a predefined array of options. However, when a specific async response or event contains an assignee, I set that as the 'currentAssignee' which is then preselected in the list.
While this approach works to some extent, the select box appears empty or invisible initially. Only upon clicking on it, the options 'Name One', 'Name Two', and the name from the response (like 'John Doe') become visible. However, this does not truly satisfy the 'selected' option requirement since it remains hidden until clicked by the user upon page load.
Is there a better way to handle this situation?
<select class="firstLastNames linkBox" v-model="currentAssignee" @change="changeAssignee()" >
<option :selected="true">{{currentAssigneeFirst}} {{currentAssigneeLast}}</option>
<option v-for="assignee in assigneeOptions" >{{assignee.email}}</option>
</select>
data () {
return {
currentAssignee: '',
assigneeOptions: [
{id: 0, email: "Name one"},
{id: 1, email: "Name two"}
],
},
}
/**further down, I set currentAssignee based on async event**/
this.currentAssignee = triggerEvent[0].assignee;