Vue에서 .reduce를 사용하여 개체/어레이를 그룹화하고 반복하는 방법

배열이 있지만 어떤 ID가 포함되어 있는지 알 수 없다고 가정합니다.그것들을 동적으로 그룹화하여 표시하려면 어떻게 해야 합니까?몇 개의 다른 ID가 있는지 알 수 없기 때문에 몇 개의 다른 어레이가 생성될지도 알 수 없습니다.

이론적으로 모든 오브젝트를 이 ID별로 그룹화하여 새로운 어레이로 푸시해야 한다고 생각합니다.이러한 어레이는 ‘array-0‘,array-1′ 등으로 명명할 수 있습니다.그런 다음 생성된 어레이 수를 계산하고 다음 순서로 항목을 루프해야 합니다.item in array-["n in nArrays"]이런 루프는 역동적으로 만들 수 없다고 생각하기 때문에 이 방법으로는 작동하지 않을 것입니다만, 이것은 제 아이디어를 더 잘 설명하기 위한 것입니다.

array: [
{ id: 11, item: "item" },
{ id: 49, item: "item" },
{ id: 11, item: "item" },
{ id: 20, item: "item" },
{ id: 49, item: "item" },
{ id: 83, item: "item" }, ] 
<div v-for="item in array-0">
{{ item }} // all items with id 11 e.g. </div>
<div v-for="item in array-1">
{{ item }} // all items with id 20 e.g. </div> 

하지만 역동적이어야 합니다.

<div v-for="item in array-[n in nArrays]">
{{ item }} </div> 


질문에 대한 답변