使用另一个没有键的 id 数组从对象数组中查找值

Question

我正在尝试使用第二个客户端 ID 数组从数组中查找客户端的名称。 我会尝试一个老式的 for 循环，但我认为在 vuejs 中这不是最佳解决方案。

这是我的主要数组

clients = [
  {id: "1", name: "Bob"},
  {id: "2", name: "Mary"},
  {id: "3", name: "John"},
  {id: "4", name: "Petter"}
];

这是仅包含特定客户端 ID 的数组

selectedClientsIds = [1, 2, 4];

Answer 1

如果 selectedClientsIds 中的所有元素始终是客户端中的 id，您可以通过在客户端中查找它们来将名称映射到 selectedClientsIds 中的 id。 喜欢：

const names = selectedClientsIds.map((id) => clients.find((el) => el.id == id).name);

仅使用==因为客户端中的 id 是字符串。

Answer 2

我会尝试一个老式的 for 循环，但我认为在 vue.js 中这不是最佳解决方案。

这都是关于过滤数组的，这可以在 Vue 脚本中使用JavaScript完成，然后结果会将过滤后的数据绑定到模板中。

演示：

 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>