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

ここでの問題点は、in DOM templatesではテンプレートがブラウザで最初にレンダリングされ、HTMLテーブルでは内部で特定の種類の要素しか使用できないという点です。その場合、コンポーネントclientlistitemが最初にレンダリングされますテーブルの外にの場合、Vueはテンプレートをコンパイルして、コンポーネントを間違った場所に配置します。

これを修正するには、is special attributeを使用してください。

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

ブラウザはこれを受け入れて、正しい場所にtrをレンダリングするが、Vueのは、あなたのコンポーネントとしてそれを解釈するでしょう。

あなたのフィドルはupdatedです。