Vue JS - <tr>, <td> elemen tidak dipaparkan apabila dihantar ke komponen jadual

Question

Saya telah mendaftarkan komponen jadual fail menggunakan vue.js:

<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>

Saya mahu menggunakannya sebagai komponen perwakilan. Apabila saya cuba menghantar elemen tr dan td kepadanya dalam Laravel Blade seperti ini:

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

Bagaimana cara mendaftar komponen:

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

Semuanya kecuali baris dan elemen data akan dipaparkan dan jadual akan menjadi tidak teratur. Berikut ialah kandungan jadual dan elemen selepas dipaparkan dalam penyemak imbas:

Elemen jadual dalam imej pelayar

Saya membaca artikel dalam talian dan mencari melalui Soal Jawab tetapi tidak menemui apa-apa.

Answer 1

Dokumentasi rasmi menyebut langkah berjaga-jaga menghurai templat DOM

Untuk lebih jelas, sila lihat juga isu ini https://github.com/vuejs/Discussion/issue/204