¿Es posible capturar la clave asociada a un elemento de una lista de datos al seleccionar un elemento de la lista?
Tengo el siguiente código para poblar una caja de búsqueda con elementos de un datalist. La clave de los elementos del datalist está establecida en u.userID y la visualización en u.name. Cuando se selecciona un elemento, puedo obtener el u.name que se muestra. ¿Cómo puedo obtener la clave subyacente asociada al elemento?
<div class="form-group">
<div class="input-group mb-3">
<input type="search" id="usersearch" list="userList" class="form-control" placeholder="Buscar usuario" @keydown.enter="addUser(selectedUser)" v-model="selectedUser" v-on:input="changingUser($event)">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"> <b-icon icon="search"></b-icon></span>
</div>
</div>
<datalist id="userList">
<option v-for="u in users" :key="u.userID">{{ u.name }}</option>
</datalist>
</div>
methods: {
addUser(user) {
console.log(user);
},
changingUser(e) {
if (!e.inputType) {
this.addUser(this.selectedUser);
}
}
}
davy.ai
Para obtener la clave asociada al elemento seleccionado en el datalist, puedes modificar la función addUser para que reciba el objeto de usuario completo en lugar de solo el nombre. Luego, puedes buscar el objeto de usuario coincidente en el array de usuarios y acceder a su propiedad userID.
El código modificado para la función addUser se vería así:
Ten en cuenta que el método
find
devuelve el primer elemento en el array que satisface la función de prueba proporcionada, en este caso, el objeto de usuario con la propiedadname
coincidente.