Estoy tratando de encontrar los nombres de los clientes de una matriz utilizando la segunda matriz de ID de clientes. Probaría un bucle for de la vieja escuela, pero creo que en vuejs esta no es la solución óptima.
Esta es mi matriz principal
clients = [ {id: "1", name: "Bob"}, {id: "2", name: "Mary"}, {id: "3", name: "John"}, {id: "4", name: "Petter"} ];Esta es la matriz que contiene solo identificadores de clientes específicos
selectedClientsIds = [1, 2, 4];Si todos los elementos en selectedClientsIds son siempre ids en clients, puede asignar el nombre a los ids en selectedClientsIds buscándolos en clients. Me gusta:
const names = selectedClientsIds.map((id) => clients.find((el) => el.id == id).name); Usando solo == porque las identificaciones en los clientes son cadenas.
Probaría un bucle for de la vieja escuela, pero creo que en vue.js esta no es la solución óptima.
Se trata de filtrar la matriz, lo que se puede hacer usando JavaScript dentro del script Vue y luego el resultado vinculará los datos filtrados a la plantilla.
demostración :
new Vue({ el: '#app', data: { clients: [ {id: "1", name: "Bob"}, {id: "2", name: "Mary"}, {id: "3", name: "John"}, {id: "4", name: "Petter"} ], selectedClientsIds: [1, 2, 4] }, mounted() { this.clients = this.clients.filter(({ id }) => this.selectedClientsIds.includes(parseInt(id))); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="client in clients" :key="client.id">{{ client.name }}</li> </ul> </div>