用VueJS2绘制表

Question

为了进行服务器呈现，我将JQuery管理的表迁移到VueJS ( 2.4.4 )，我使用Laravel，因此：

<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>

在我的组件模板中，<association-item>是：

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

然后，我将组件链接到标记上：

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

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

所以，当我看到源代码时，我的<association-item>就在<tbody></tbody>中了。

但是在屏幕上，数据在标题之前，当我用Chrome进行调试时，我可以看到所有的<tr>item</tr>都在<div class='container-fluid'和<table>之间

为什么会发生这种事？

Answer 1

tbody的唯一标记是tr。

您应该能够使用

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

使HTML合法。(可能需要是is="associationItem"。)