この単純なVueJS2.xコンポーネントがネストされたHTMLテーブル要素から引き上げられるのはなぜですか？

debugcn 投稿 Dev

ウォルトストーンバーナー

VueJS2.6.12の開発バージョンを使用しています。

私のHTMLには、次のようなVueJSテンプレートがあります（小さな例のために削除しました）。

<div>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>

    <tbody id="main">
       <my-item v-for="item in dataset" :d="item" :key="item.key"/>       <!-- (this part works) -->
    </tbody>
  </table>
</div>

私のJavaScriptでは、次のようにグローバルVueコンポーネントを定義しました（これは機能し、データを表示します）。

Vue.component('my-item', {
  props: ["d"],
  template: `<tr><td>{{this.d.AAA}}</td><td>{{this.d.BBB}}</td></tr>`
});

ページをロードすると、データが正しくレンダリングされているのがわかりますが、テーブルヘッダーは下部にあります。trけれども（私のデータを含む）の要素は、存在している外table。

ブラウザインスペクタでDOMを表示すると、VueJSがこの構造を構築し、要素を外部にtbody、さらにはtableそれ自体を持ち上げていることがわかります。

<div>
  <tr><td>aaa</td><td>bbb</td></tr>               <!-- Why are these two rows outside the table? -->
  <tr><td>yyy</td><td>zzz</td></tr>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>
    <tbody id="main"></tbody>
  </table>
</div>

なぜこれが発生し、どうすれば修正できますか？<tr> ... </ tr>要素tbodyがtheadヘッダー行の下にある内に挿入されることを期待しています。

少し奇妙なことに、上下にいくつかの行を手動で追加すると、次のようになります。

    <tbody id="main">
       <tr><td>111</td><td>222</td></tr>
       <my-item v-for="item in dataset" :d="item" :key="item.key"/>
       <tr><td>888</td><td>999</td></tr>
    </tbody>

それらは保存されます：

<div>
  <tr><td>aaa</td><td>bbb</td></tr>         <!-- ...but these still got hoisted out if the table -->
  <tr><td>yyy</td><td>zzz</td></tr>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>
    <tbody id="main">
      <tr><td>111</td><td>222</td></tr>
      <tr><td>888</td><td>999</td></tr>
    </tbody>
  </table>
</div>

ウォルトストーンバーナー

うーん、少し違う形で、同じ問題に噛まれました。

一言で言えば、DOM解析の警告があり、のようなtable要素には、その中に表示できる要素に制限があります。（FYI：、、だけでなく、この問題を持っています）。ulolselect

解決策は、VueJSのis属性を使用することです。

<div>
  <table class="table">
    <thead>
      <tr><th>AAA</th><th>BBB</th></tr>
    </thead>

    <tbody id="main">
       <!-- Specify the element, but then use  is="component-name" -->
       <tr is="my-item" v-for="item in dataset" :d="item" :key="item.key"/>
    </tbody>
  </table>
</div>

これにより、table（およびtbody）が " tr"要素を取得するため、テンプレートの解析が正常になりますが、そのコンテンツは名前付きコンポーネントによってレンダリングされます。

重要：VueJS 2（上に表示）からVueJS3への重大な変更。

VueJS 2では、VueJS3ではis="..."`v-is =" ... "になりました。

また、VueJS 2は文字列を取りましたが、VueJSはJavascript式を取ります。つまり<tr v-is="'my-item'">、引用符を使用して文字列を渡す必要があります。

https://v3.vuejs.org/guide/component-basics.html#dom-template-parsing-caveatsおよびhttps://v3.vuejs.org/guide/migration/custom-elements-interop.html#vを参照してください詳細については、-is-for-in-dom-template-parsing-workaroundsを参照してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]