[v-for] Add a blank whenever an element with the same value ends

I have the following arrays:
array = [
{ field_id: 1, value: 0 },
{ field_id: 1, value: 0 },
{ field_id: 13, value: 0 },
{ field_id: 13, value: 0 },
{ field_id: 14, value: 0 },
{ field_id: 14, value: 0 }
]

I want to add a ‘field sum’ column when the same ‘field_id’ is finished (using v-for).
What should I do?

now:

I want:

thank you.

Use computed to return an array of those field values, and the sums, then loop over those individually.

computed array:

newArray = [
    {
        values: [
            { field_id: 1, value: 0 },
            { field_id: 1, value: 0 }
        ],
        sum: 0
    },
     {
        values: [
            { field_id: 2, value: 0 },
            { field_id: 2, value: 0 }
        ],
        sum: 0
    }
]

You could do the above with a reduce method.

Then your for loop would be:

<MyFields v-for="item in newArray>
     <Field v-for="field in item.values" v-bind="field" />
    <div>{{ item.sum }}</div>
</MyFields>