我是 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 }}))]
uj5u.com熱心網友回復：
如果這些記錄基于 被認為是不同的id，那么您就快到了：只需將您找到的唯一 id 放入一個集合中，然后在原始陣列中為每個唯一 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' }
// ]
您還可以將陣列簡化為一個物件以消除基于 的重復項id，然后獲取該物件的值以獲取關聯的條目：
const array = [...]
const distinct = Object.values(
array.reduce((o, a) => { o[a.id] = a; return o}, {}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446450.html
標籤：Vue.js Vuetify.js