Vue组件 - 渲染错误的位置

Question

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

实施例＃1：联模板

这是工作正常。 vue组件不变，如下面的示例＃2所示，唯一的区别是我将模板内容作为内联模板复制到标记中。

参见：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

这里的问题是，使用in DOM templates模板首先由浏览器呈现，而HTML表格只允许某些种类的元素在里面。既然如此，组件clientlistitem首先在表之外呈现，然后Vue编译导致组件位于错误位置的模板。

要解决该问题，请使用is special attribute。

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

浏览器将接受这一事实，使得在正确的地方tr，但Vue公司将它解释为你的组件。

这是你的小提琴updated。