Vue3中v-for循环重渲染异常：支付项删除显示错误求助

核心原因 #

你遇到的现象是因为Vue虚拟DOM的diff算法依赖key来识别元素身份，当前使用payment.index作为v-for的key存在关键问题：

• index是数组下标，删除元素后后续元素的index会自动前移，导致Vue错误复用组件实例，视觉上呈现删除最后一个元素的假象；
• 若payment.index本身不是唯一值，Vue无法准确区分不同支付项，进一步加剧渲染混乱。

虽然filter()返回新数组能正确更新数据，但key的错误会直接导致渲染与数据不匹配，这是问题的核心诱因。

解决步骤 #

1. 替换v-for的key为支付项唯一标识 #

给每个payment对象生成一个唯一且稳定的id（比如创建时用Date.now() + Math.random()生成，或后端返回的唯一ID），将v-for的key改为这个id：

<tr class="invoice-form-wrapper invoice" v-if="item.payments.length > 0" >
     <td colspan=6>
         <template
             v-for="payment in item.payments"
             :key="payment.id" <!-- 替换为唯一id -->
         >
             <InvoiceForm
                  :invoiceItem="payment"
                  :calcRemainingFromInput="calcRemainingFromInput"
                  :removeForm="removeForm"
              />
         </template>
     </td>
</tr>

2. 优化removeForm方法，确保响应式更新 #

推荐使用Vue能直接检测到的数组变更方法splice()删除元素，相比filter()赋值更直接触发响应式：

removeForm(item) {
  this.invoice.invoice.forEach(invoiceItem => {
    // 用唯一id查找目标元素索引
    const targetIndex = invoiceItem.payments.findIndex(p => p.id === item.id);
    if (targetIndex !== -1) {
      // splice会触发Vue数组响应式更新
      invoiceItem.payments.splice(targetIndex, 1);
    }
  });
}

若坚持使用filter()，需确保赋值操作被Vue检测到（当前代码赋值方式可行，但必须先解决key问题）：

removeForm(item) {
  this.invoice.invoice.forEach(invoiceItem => {
    invoiceItem.payments = invoiceItem.payments.filter(p => p.id !== item.id);
  });
}

3. 验证支付项引用一致性 #

确保传入removeForm的item是数组中存在的对象引用（避免因对象复制导致匹配失败），从你描述的console.log结果来看数据已正确更新，这一步可作为辅助验证。

内容的提问来源于stack exchange，提问作者Riccardo