table.vue
...
<tbody class="table-body">
<slot></slot>
</tbody>
...
TableCellRow.vue
<template>
<td class="table-row-cell" :class="this.class">
<slot></slot>
</td>
</template>
how I tried using it:
<my-table>
<template #default>
<tr>
<td>i am inside the tr</td> <----- this is inside the <tr>
<table-row-cell> <-------- this is outside of the <tr>
i am outside the tr
</table-row-cell>
</tr>
</template>
</my-table>
and like this:
<my-table>
<tr>
<td>i am inside the tr</td>
<table-row-cell>
i am outside the tr
</table-row-cell>
</tr>
</my-table>
in this latest case, this is what I get:
<tbody class="table-body"> i am inside the tr <td class="table-row-cell"> i am outside the tr </td></tbody>
and in the first case I get this:
<tbody class="table-body"><tr><td>i am inside the tr</td></tr><td class="table-row-cell"> i am outside the tr </td></tbody>
I’ve also tried just this:
<my-table><template #default>
<tr>
<table-row-cell>
i am outside the tr
</table-row-cell>
</tr>
</template>
</my-table>
but I just get this:
<tbody class="table-body"><tr></tr><td class="table-row-cell"> i am outside the tr </td></tbody>
so what’s up with that? I can’t use a component inside a tag, that just has a tag in it? or like what is the issue? If I place my component inside the tag, why does it either throw the out and only render the , or either render the and put everything else below that? Like what? Why does Vue have to be SO difficult, for absolutely no reason?
I just want to put a into the slot of my custom table, and put a custom component inside that – why does it have to be so difficult? Am I tripping or something? I’m not missing a single closing tag, my components are fine, so why is this happening?