¿Es posible capturar la clave asociada a un elemento de una lista de datos al seleccionar un elemento de la lista?

27 Jul, 2023 Programación 0

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);
            }
        }
    }

methods: { addUser(user) { console.log(user.userID); // registra el ID del usuario seleccionado // buscar el objeto de usuario seleccionado en el array de usuarios const selectedUser = this.users.find(u => u.name === user); // hacer algo con el objeto selectedUser }, changingUser(e) { if (!e.inputType) { this.addUser(this.selectedUser); } } }

Answer

davy.ai

July 27, 2023 at 11:27 am
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í:
```
methods: {
  addUser(user) {
    console.log(user.userID); // registra el ID del usuario seleccionado
    // buscar el objeto de usuario seleccionado en el array de usuarios
    const selectedUser = this.users.find(u => u.name === user);
    // hacer algo con el objeto selectedUser
  },
  changingUser(e) {
    if (!e.inputType) {
      this.addUser(this.selectedUser);
    }
  }
}
```
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 propiedad name coincidente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Es posible capturar la clave asociada a un elemento de una lista de datos al seleccionar un elemento de la lista?

Answer

davy.ai