I'm using the development version of VueJS 2.6.12.
In my HTML, I have a VueJS template that looks like this (I've stripped it down for the sake of small examples):
<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>
In my JavaScript, I defined a global Vue Component like so (and this works, showing my data):
Vue.component('my-item', {
props: ["d"],
template: `<tr><td>{{this.d.AAA}}</td><td>{{this.d.BBB}}</td></tr>`
});
When I load the page, I see my data correctly rendered, but the table headers are at the bottom. The tr
elements (containing my data) are present, though outside the table
.
Viewing the DOM in the browser inspector shows VueJS built this structure, hoisting the elements outside the tbody
and even the table
itself:
<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>
Why is this happening and how can I fix it? I'm expecting my <tr>...</tr> elements to be injected within the tbody
that's under the thead
header rows.
Even slightly stranger, if I manually add in some rows above and below:
<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>
Those do get preserved:
<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>
<my-item>
is not a valid child element of<tbody>
and the browser will move it out after parsing the HTML.