所以我在 Vuetify 中有一個包含事件日志項的資料表。例如，它看起來像這樣：
[{
"id": 1,
"actionBy": "John",
"eventAction": "CREATED",
"Description": ""
"actionDate": "2022-09-02T10:31:57.223765"
}, {
"id": 2,
"actionBy": "Anna",
"eventAction": "MODIFIED",
"Description": ""
"actionDate": "2022-09-07T13:44:29.892831"
}, {
"id": 3,
"actionBy": "Eric",
"eventAction": "REMOVE_IMAGE",
"Description": "Test description"
"actionDate": "2022-09-07T13:44:39.800381"
}, {
"id": 4,
"actionBy": "Sysadmin",
"eventAction": "REMOVE_IMAGE",
"Description": "Test description"
"actionDate": "2022-09-08T09:21:29.272312"
}, {
"id": 5,
"actionBy": "Sysadmin",
"eventAction": "MODIFIED",
"Description": "Test description"
"actionDate": "2022-09-08T09:21:54.991851"
}, {
"id": 6,
"actionBy": "Sysadmin",
"eventAction": "REMOVE_IMAGE",
"Description": "Test description"
"actionDate": "2022-09-08T13:55:00.469676"
}
]
現在我想使用一個選擇（在 Vuetify 中它是一個 v-select）。我想在哪里獲得這樣的選擇選項：
[
{ value: 'CREATED', count: 1 },
{ value: 'MODIFIED', count: 2 },
{ value: 'REMOVE_IMAGE', count: 3 },
]
我找到了一些方法，但感覺不是很干凈。我想知道是否有有效的方法來做到這一點。所以看起來并不臟。;-)
uj5u.com熱心網友回復：
您可以使用此處的 group by 和此處的映射來創建陣列：
computed: {
selectOptions() {
const obj = this.events.reduce((ar, x) => {
ar[x.eventAction] = (ar[x.eventAction] || 0) 1;
return ar;
}, {});
return Object.keys(obj).map(key => ({value: key, count: obj[key]}));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507921.html
標籤：数组 Vue.js 目的 Vuetify.js v-选择
上一篇：vue3新加入者，為什么@click在跟隨vue3代碼的按鈕上不起作用
下一篇：通過打字稿中的所有物件屬性賦值