Tengo una demostración de CodePen en funcionamiento aquí: https://codepen.io/JosephAllen/pen/vYmQpWL?editors=0010

Esta demostración:

1. Obtiene usuarios de una API
2. Ordena la lista en función de una propiedad de "puntos"
3. Y luego muestra esa lista ordenada utilizando el índice como un "rango". En otras palabras, si tu índice es cero, estás en primer lugar.

Hay un campo de entrada para buscar y filtrar la lista, pero filtrar la matriz crea un nuevo índice para cada usuario, lo que arruina toda la idea de una clasificación.

¿Cómo puedo mantener la función de clasificación y búsqueda sin crear nuevos índices para los usuarios?

Si yo fuera el autor de la API, solo incluiría el rango como una propiedad, pero no lo soy.

Mi función de búsqueda:

 getUsers() { fetch(`https://trafficthinktank.com/wp-json/mjtw/v1/community`) .then((res) => res.json()) .then((data) => { this.isLoading = false; this.users = data.sort((a, b) => b.points - a.points); // this.users = this.users.map(user => ({ visible: true, ...user })); console.log(this.users); }); 0; }

Mi función de filtro:

 get filteredUsers() { if (this.search === "") { return this.users; } return this.users.filter((item) => { return item.name.toLowerCase().includes(this.search.toLowerCase()); }); }