Question

我正在将由JQuery管理的表迁移到VueJS（2.4.4）对于服务器渲染，我使用Laravel，所以：

sqlalchemy.orm.query.Query

在我的组件模板中，<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>

但是在屏幕上，数据在标题之前，当我使用Chrome进行调试时，我发现所有<tbody></tbody>都在<tr>item</tr>和<div class='container-fluid'之间

为什么会这样？

Answer 1

唯一标记permitted as direct children of tbody为tr。

您应该能够使用

指定组件

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

使HTML合法化。（可能需要is="associationItem"。）

使用VueJS2渲染表

1 个答案: