title: v-for with v-if on the same node
body: <p>i have a table that displays customers details with thier invoices, inside the table i want to check for each customer, if he has made full payment, part payment or none. but the table displays <strong>&quot;SUCCESS DANGER&quot;</strong> if the the customer has made full payment, <strong>WARNING DANGER</strong> if part payment of invoice. The outcome i want is below the code</p>
  <p>This is the code for the table</p>
  <pre><code>     &lt;tbody v-for=&quot;(invoice,index) in customer.invoices&quot; :key=&quot;invoice.id&quot;&gt;
          &lt;td v-for=&quot;(payment,i) in customer.payments&quot; v-if=&quot;payment.invoice_id === invoice.id&quot;&gt;
              &lt;span v-if=&quot;customer.payments[i].amount_paid === invoice.total&quot;&gt;success&lt;/span&gt;
              &lt;span v-else-if=&quot;customer.payments[i].amount_paid &gt; 0 &amp;&amp; customer.payments[i].amount_paid &lt; invoice.total&quot;&gt;warning&lt;/span&gt;
              &lt;span else&gt;danger&lt;/span&gt;
         &lt;/td&gt;
    &lt;/tbody&gt;
  </code></pre>
  <p>This is the outcome that i get the <strong>status of payment</strong></p>
  <pre><code>  fullpayment =&gt; success not &quot;success warning&quot;
    partpayment =&gt; warning not &quot;warning danger&quot;
    none    =&gt; DANGER
  </code></pre>
  <p>this is the data that i used
  <a href="https://i.stack.imgur.com/p3PW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p3PW8.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/36zZb.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/GpGFl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GpGFl.png" alt="enter image description here" /></a></p>