I have an SQL query that joins two tables and returns an array/collection of Invoices and the Invoice_items contained in this invoice.

For Example...

InvNum#1 - Datetime - LineNum1 - ItemName1 - LineAmount - TotalAmount
InvNum#1 - Datetime - LineNum2 - ItemName2 - LineAmount - TotalAmount
InvNum#3 - Datetime - LineNum1 - ItemName6 - LineAmount - TotalAmount
InvNum#4 - Datetime - LineNum1 - ItemName9 - LineAmount - TotalAmount

I’m trying to build a vue3 page where I can loop this in like so…

DateTime Today

  INVNum - LineNum1 - ItemName1 - LineAmount 
           LineNum1 - ItemName1 - LineAmount 

TotalAmount
_________

  INVNum - LineNum1 - ItemName1 - LineAmount 
           LineNum1 - ItemName1 - LineAmount 

TotalAmount
_________

DateTime Tomorrow

  INVNum - LineNum1 - ItemName1 - LineAmount 
           LineNum1 - ItemName1 - LineAmount 

TotalAmount
_________

  INVNum - LineNum1 - ItemName1 - LineAmount 
           LineNum1 - ItemName1 - LineAmount 

TotalAmount

My current approach is below…

       <div class="mt-2 ml-5 border-b border-slate-500 py-1">
            Transaction Date {{ props.sales_summery[0].DateTime }}
        </div>



        <section v-for="sales in props.sales_summery" :key="sales.Invoice_Number">

            <div class="mt-2 ml-5 font-medium text-gray-500">Inv# {{ sales.Invoice_Number }} - 13:01
            </div>
            <div v-if="sales.Invoice_Number === prevInvNumber">
                <div class=" py-4">

                    <div class="ml-10 text-gray-500"> x{{ sales.Quantity }} - ${{ sales.PricePer }} -
                        {{ sales.ItemName }}

                    </div>
                                    <div class="mt-4 ml-5 font-medium text-gray-500"> Tax: $2.50 - Total: $21.34
                                    </div>
                                    <div class="mt-3 border-b border-slate-300 w-1/4"></div>
                </div>
            </div>

            <div v-else>
                <div class=" py-4">
                    <div class="mt-2 ml-5 font-medium text-gray-500">Inv# {{ sales.Invoice_Number }} - 13:01
                    </div>
                    <div class="ml-10 text-gray-500"> x{{ sales.Quantity }} - ${{ sales.PricePer }} -
                        {{ sales.ItemName }}
                    </div>
                    <div class="mt-4 ml-5 font-medium text-gray-500"> Tax: $2.50 - Total: $21.34
                    </div>
                    <div class="mt-3 border-b border-slate-300 w-1/4"></div>
                </div>
            </div>

    </section>

<script setup>

const props = defineProps({
    sales_summery: Object
})

const prevInvNumber = 2

</script>

My issues are currently

The preInvNumber would need to somehow record the previous loops invoice number to compare on the next run and I’m not too sure on how to do that.

Next I would like the line items to be grouped by invnum and all invnum to be grouped by datetime but with how I understand the current V-for loops it seems to seperate every item in the array.