2

I have registered a single file table component using vue.js as:

   <template>
        <div>
            <table class="table border">
                <thead>
                    <tr>
                        <td>header 1</td>
                        <td>header 2</td>
                    </tr>
                </thead>
                <tbody>
                    <slot></slot>
                </tbody>
            </table>
        </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style></style>

I want to use it as a representational component. When I try to pass tr and td elements to it in Laravel blade like:

<table-component>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
</table-component>

how I registered the component:

Vue.component(
    "table-component",
    require("./components/admin/TableComponent.vue").default
);

everything get rendered except row and data elements and the table gets out of form. here`s table content and elements after getting rendered in browser:

table elements in browser picture

I have read online articles and searched through Q/As but couldn`t find anything.

H.M
  • 21
  • 4

1 Answers1

0

It's mentioned in the official docs DOM Template Parsing Caveats

Also refer this issue for more clarity https://github.com/vuejs/Discussion/issues/204

tony19
  • 125,647
  • 18
  • 229
  • 307
Naresh
  • 862
  • 3
  • 12
  • 35
  • Thank you @Naresh but, I don't get. I'm using correct elements ( tr and td ) in table slot. btw, shall I register components for tr and tds too or the way I`m using them is correct? – H.M Jan 30 '22 at 12:50