Vue.js v-for与v-if在同一节点上

我有一个表，显示客户的详细信息和他们的发票，在表内我想检查每个客户，如果他已支付全部款项，部分款项或没有。但如果客户已全额付款，则该表显示“成功危险”，如果发票部分付款，则显示“警告危险”。我想要的结果低于代码

这是表的代码

     <tbody v-for="(invoice,index) in customer.invoices" :key="invoice.id">
        <td v-for="(payment,i) in customer.payments" v-if="payment.invoice_id === invoice.id">
            <span v-if="customer.payments[i].amount_paid === invoice.total">success</span>
            <span v-else-if="customer.payments[i].amount_paid > 0 && customer.payments[i].amount_paid < invoice.total">warning</span>
            <span else>danger</span>
       </td>
  </tbody>

这是我使用的数据

---

为此提供的数据是必要的。这也可能是相当低效的，我假设每个发票有多个付款，这将使输出多个值。还有，既然你已经有了

付款

，为什么还要使用

customer.payments[i]

？@samikuhmonen我已经添加了数据和表格。我们将感谢您的任何帮助，不是

else

，而是

v-else

我将重新编写此代码，以便您在不同的行上获得v-if和v-for。如果需要筛选列表，请使用computed属性。如果需要有条件地渲染v-for，则可以将v-If放在v-for周围的v-container标记上。

  fullpayment => success not "success warning"
  partpayment => warning not "warning danger"
  none    => DANGER