<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>La idea de este script es que cuando selecciona una opción, se elimina y se agrega a otra matriz de objetos y desaparece de la lista de selección. Quiero que cuando esto suceda, la primera opción vuelva a ser seleccionada.
Puede usar v-model para obtener el elemento seleccionado de <select>
<select v-model="selected"> ...... </select>y luego usarlo de esta manera:
<span>Selected: {{ selected }}</span>
La mejor manera es tener:
una opción y una opción seleccionada en los datos.
A opciones disponibles como opciones calculadas, con options.filter(o => o !== this.selectedOption)
Vincule la selección con una v-model=selectedOption
vincule el con las opciones disponibles