[Vuejs]-Special loop for vuejs

by

0👍

✅

What you want to achieve is doable using v-for like below:

<tbody v-for="i in n"> // i is index and n should be passed from vue data
        <tr data-nr="@{{ i }}" data-group="1">
            <td rowspan="2">@{{ i }}</td>
            <td></td>
        </tr>
        <tr data-nr="@{{ i }}" data-group="2">
            <td></td>
        </tr>
</tbody>

vue docs: https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range

Note: You might think that multiple <tbody> is invalid. But actually, it is valid! According to mozilla docs of <table> "You can create multiple sections within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table!". See mozilla docs here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#multiple_bodies

Leave a comment