在保留多个数据元素的同时从 VueJS 中的数组获取不同的值

Question

我是 VueJS 的新手，在从数组中获取不同的值时遇到问题。我有一个包含多列的数据数组。我正在尝试获取不同的值以将它们用于复选框。我运行遇到的问题是，我似乎无法同时获得两列，同时仍保留不同的列。任何建议将不胜感激。

传入数据示例：

const array = [{
    'name': 'Alpha',
    'id': 1,
    'note': 'asdfasdf'
  },
  {
    'name': 'Beta',
    'id': 2,
    'note': 'asdfasdf'
  },
  {
    'name': 'Alpha',
    'id': 1,
    'note': 'asdfasdf'
  }
  ]

我希望函数的输出是什么：

const array = [{
    'name': 'Alpha',
    'id': 1
  },
  {
    'name': 'Beta',
    'id': 2
  }
  ]

我想如何使用新数组：

<v-checkbox
  v-for="(x,i) in array"
  :label="x.name"
  :value="x.id"
></v-checkbox>

我尝试了下面的代码，我确实得到了不同的值，但只有一列。

[...new Set(this.array.map((x) => x.id))]

当我尝试这个时，我得到了我想要的两列，但有重复。

[...new Set(this.array.map((x) => { return { name: x.name, id: x.id }}))]

Answer 1

如果这些记录根据 id 被认为是不同的，那么您就快完成了：只需将找到的唯一 ID 放入一个集合中，然后在原始数组中输入 find the first对于每个唯一 ID：

const array = [...]

const ids = [...new Set(array.map(x => x.id))]; // your code from above
// ids = [ 1, 2 ]

const distinct = ids.map(id => array.find(x => x.id === id));
// distinct =
// [
//   { name: 'Alpha', id: 1, note: 'asdfasdf' },
//   { name: 'Beta', id: 2, note: 'asdfasdf' }
// ]

您还可以 reduce the array into an object to eliminate duplicates based on id, and then take the values 该对象以获取相关条目：

const array = [...]
const distinct = Object.values(
    array.reduce((o, a) => { o[a.id] = a; return o}, {}));

在保留多个数据元素的同时从 VueJS 中的数组获取不同的值

Getting distinct values from an array in VueJS while keeping multiple data elements

vue.js

vuetify.js