<template>
<select class="form-control mt-1" @change="selectUser">
<option >select user</option>
<option v-for="(user, index) in users" :key="index" {{user.first_name}}</option>
</select>
</template>
<script>
selectUser(event){
if(event.target.selectedIndex != 0){
this.index = event.target.selectedIndex-1
this.selectedUsers.push(this.users[this.index])
this.users.splice(this.index, 1)
}
}
</script>
The idea of this script is that when you select an option it gets removed and added to another array of objects and it disappears from the select list. I want when this happened, the first option to get selected back again.
You can use v-model to get the selected item from <select>
<select v-model="selected">
......
</select>
and then use it this way:
<span>Selected: {{ selected }}</span>
The best way is to have :
a options and a selectedOption in the data.
A availableOptions as computed options, with options.filter(o => o !== this.selectedOption)
Bind the select with a v-model=selectedOption
bind the with the avaiableOptions