I have an array of objects:
arr = [
{ age: 5, name: foo },
{ age: 5, name: bar },
{ age: 8, name: baz }
]
I am iterating over the array using the following loop:
<div v-for="(obj, index) in arr" :key="index">
<h5>age: {{ obj.age }}</h5>
<ul>
<li>{{ obj.name }}</li>
</ul>
</div>
This setup results in:
<div>
<h5>age: 5</h5>
<ul>
<li>foo</li>
</ul>
</div>
<div>
<h5>age: 5</h5>
<ul>
<li>bar</li>
</ul>
</div>
<div>
<h5>age: 8</h5>
<ul>
<li>baz</li>
</ul>
</div>
But I want to merge arrays with the same age like this:
<div>
<h5>age: 5</h5>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
<div>
<h5>age: 8</h5>
<ul>
<li>baz</li>
</ul>
</div>
I'm considering creating a separate object and combining the contents of arrays if the age key/value pairs match. How can I achieve this?