Vue 组件 - 在错误的位置渲染

Question

我在 vue 组件和内联模板之间看到了奇怪的行为。

示例 #1：内联模板

这按预期工作。 根据下面的示例 #2，vue 组件没有变化，唯一的区别是我将模板内容作为内联模板复制到标签中。

见： https ://jsfiddle.net/pobffmnv/

<div class="panel panel-primary">
    <div class="panel-heading">Current Clients</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Client Name</th>
                <th style="text-align: center;">No. Projects</th>
                <th style="text-align: center;">Time (7 days)</th>
                <th style="text-align: center;">Edit</th>
            </tr>
        </thead>
        <tbody>
            <clientlistitem inline-template>
                <tr>
                    <td>Test</td>
                    <td style="text-align: center;">0</td>
                    <td style="text-align: center;">0</td>
                    <td style="text-align: center;">
                        <div class="btn-group btn-group-xs" role="group">
                            <button type="button" class="btn small btn-primary">Edit</button>
                        </div>
                    </td>
                </tr>
            </clientlistitem>
        </tbody>
    </table>
</div>

这正确显示了以下内容：

示例 #2：非内联

以下是我的 Vue 模板。 以下是删除内联模板的代码更改。

见： https ://jsfiddle.net/Ld47hoy2/

<template>
    <tr>
        <td>Test</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">0</td>
        <td style="text-align: center;">
            <div class="btn-group btn-group-xs" role="group">
                <button type="button" class="btn small btn-primary">
                    Edit
                </button>
            </div>
        </td>
    </tr>
</template>
<script>
    export default {

    }
</script>

更新页面代码：

<div class="panel panel-primary">
    <div class="panel-heading">Current Clients</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Client Name</th>
                <th style="text-align: center;">No. Projects</th>
                <th style="text-align: center;">Time (7 days)</th>
                <th style="text-align: center;">Edit</th>
            </tr>
        </thead>
        <tbody>
            <clientlistitem></clientlistitem>
        </tbody>
    </table>
</div>

但是，使用上述内容，将显示以下内容：

查看页面输出的源代码，它似乎已将呈现的代码放在我的表格之前......？ 我希望这在<tbody></tbody>标签之间。

为什么 Vue 会将代码输出到该位置而不是预期的位置？

Answer 1

这里的问题是， 在 DOM 模板中，模板首先由浏览器呈现，而 HTML 表只允许其中的某些类型的元素。 在这种情况下，组件clientlistitem首先呈现在 table之外，然后 Vue 编译模板导致组件位于错误的位置。

要解决这个问题，请使用is special 属性。

<tbody>
  <tr is="clientlistitem"></tr>
</tbody>

浏览器将接受这一点并将tr呈现在正确的位置，但 Vue 会将其解释为您的组件。

这是你的小提琴更新。