[Vuejs]-Conditionally close insert </tr><tr> in Vuejs

by

1👍

✅

You could do something like this:

<table>
<tr v-for="i in fruits.length/2"> <!--- create a row for every second item -->
  <td>
    Fruit: {{fruits[i*2]}}
  </td>
  <td v-if="i*2+1 < fruits.length">  <!--- check if there is another item left to display -->
    Fruit: {{fruits[i*2+1]}}
  </td>
</tr>
</table>

It’s not very elegant, but it does the job! I made a Codepen here.

👤D Malan

Leave a comment