Here is a brief overview of the project: We need to display an invoice card that contains details about an invoice. Users should be able to assign payments to the invoice and also remove them. These payments are stored as objects in an array.
<tr class="invoice-form-wrapper invoice" v-if="item.payments.length > 0" >
<td colspan=6>
<template
v-for="payment in item.payments"
:key="payment.index"
>
<InvoiceForm
:invoiceItem="payment"
:calcRemainingFromInput="calcRemainingFromInput"
:removeForm="removeForm"
/>
</template>
</td>
</tr>
When a payment is removed, the function removeForm is triggered which removes the object using the filter() method:
removeForm(item) {
for(let i = 0; i < this.invoice.invoice.length; i++) {
let payments = this.invoice.invoice[i].payments;
if(payments.includes(item)) {
this.invoice.invoice[i].payments = payments.filter(obj => obj !== item);
}
}
}
The issue arises when trying to remove a payment - it seems that the last element disappears from the browser view instead of the intended one. Clicking on the element again does not have any effect. However, upon logging the array with console.log, the correct element is indeed removed.
Would anyone happen to have any suggestions or ideas? It appears Vue might not be re-rendering the array accurately.