When using a VueJS template and trying to inject a component inside of a
such as a
tr, the rendered component is hoisted outside of the parent element.
You write this:
<table> <my-component v-for=...> </table>
And it renders like this:
<tr>...<tr> <table> </table>
In a nutshell, there are DOM Parsing Caveats
and elements like
table have restrictions on what elements can appear inside them. (FYI:
select have this issue as well).
The solution is to use VueJS's is attribute:
<table> <tr is="my-component" v-for=...> </table>
This causes the template parsing to be happy, as
table (or even a nested
tbody) will be getting a "true"
tr element, but
its content will be rendered by the named component.
UPDATE: In VueJS 3 the
This means you need to pass it a string, as in
<tr v-is="'my-component'">. See workarounds.