CODEWITHSUNDEEP
jqueryvue.jsdatatablewrapper
ZeRoX
ZeRoX

Reputation: 53

Wrapper for tr with Vue.js DataTable

I have a table with 2 <tr> in it. I need to wrap this 2 <tr> and do the v-for in the wrap. But the v-for on <tbody> break the datatable.

Actual code :

<table class="table table-striped" id="data_table">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody v-for="item in items">
        <tr>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
        </tr>

        <tr>
            <td>{{ item.T }}</td>
            <td>{{ item.T }}</td>
        </tr>
    </tbody>
</table>

Tried :

<table class="table table-striped" id="data_table">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
    <div v-for="item in items">
        <tr>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
            <td>{{ item.A }}</td>
        </tr>

        <tr>
            <td>{{ item.T }}</td>
            <td>{{ item.T }}</td>
        </tr>
    </div>
    </tbody>
</table>

But the div break the datatable.

Thank's for answering.

Upvotes: 1

Views: 493

Answers (1)

Fisch
Fisch

Reputation: 3815

Instead of div use template. This will loop the items in your array without creating an extra element as a wrapper

Upvotes: 5

Related Questions