CODEWITHSUNDEEP
vue.js
IT Man
IT Man

Reputation: 1036

v-for render html table with multiple tr

I have a table where each "logical" row contains of two "markup rows". 

<table class="table table-bordered">
    <tbody>
        <template v-for="(note, index) in notes">
            <tr>
                <td>
                    {{ moment(note.noteTime).format('YYYY-MM-DD HH:mm') }}
                </td>
                <td>
                    {{ note.locationName }}
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    {{ note.noteText }}
                </td>
            </tr>
        </template>
    </tbody>
</table>

Is there a way generate this kind of table in vue without hurting html syntax (template element is not valid inside tbody)?

Upvotes: 1

Views: 1819

Answers (1)

puelo
puelo

Reputation: 6047

<template> does not generate a html element and thus will not interfere with html syntax. There is actually a similar example inside the VueJS docs:

https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

Here is a jsFiddle to see the example from the docs in action. You can inspect the HTML syntax:

https://jsfiddle.net/50wL7mdz/545901/

Upvotes: 2

Related Questions