使用VueJS2渲染表

Question

I'm migrating a table managed by JQuery to VueJS ( 2.4.4 ) For server rendering, I use Laravel, so :

<div class="container-fluid">
<table class="table table-togglable table-hover">
    <thead>
        <tr>
            <th data-toggle="true">Name</th>
            <th class="text-center" data-hide="phone">Federation</th>
        </tr>
    </thead>
    <tbody>
        @foreach($associations as $association) // This is Laravel blade
            <association-item
                    :association="{{ json_encode($association) }}"
                    :url_edit="{{ json_encode(route('associations.edit', $association)) }}"
                    :url_delete="{{ json_encode(route('api.associations.delete', $association)) }}"
            >
            </association-item>
        @endforeach
    </tbody>
</table>
</div>

and inside my component template, <association-item> is:

<template>
    <tr>
        <td>
            {{ association.name }}
        </td>
        <td align="center">association</td>
    </tr>
</template>

Then I link my component to the tag with:

Vue.component('association-item', require('../components/AssociationItem.vue'));

const app = new Vue({
    el: '#app'
});

So, it works, when I see source, I have my <association-item> inside <tbody></tbody>

But in the screen, data is before header, and when I debug with Chrome, I can see that all <tr>item</tr> are just between <div class='container-fluid' and <table>

Why is it happening???

Answer 1

The only tags permitted as direct children of tbody are tr.

You should be able to specify the component using

<tr is="association-item" ...>

to make the HTML legal. (It may need to be is="associationItem".)