Vue.js表在外部呈现

我正试图渲染一张桌子。数据是动态的，来自一个数组。它工作正常，除了：表格内容在页面顶部的表格外部呈现

我想把它放在桌子里面。有人能帮忙吗

这是代码的外观：

Vue.js：

Vue.component('word', {

    props: ['word-list'],

    template: '#word-template'


});

new Vue({
    el: '#root'

});

HTML:

钥匙
价值
@{{key}}
@{{value}}

---

注意：这是与Laravel一起使用的，这就是为什么有@before双花括号

您不能在Vue的模板中定义组件的模板。你需要把它搬到外面去

钥匙
价值
@{{key}}
@{{value}}

如果将组件的模板保留在根的模板中，则根将编译组件的模板作为其自己模板的一部分

<div id="root">

    <word :word-list="{{json_encode($commonWords) }}"></word>

                <template id="word-template">

                    <table class="table">
                        <thead>

                            <tr>
                                <th>Key</th>
                                <th>Value</th>
                            </tr>
                        </thead>

                        <tbody>

                            <tr v-for="(value, key) in wordList" :wordList="wordList">

                                <td> @{{ key }} </td>
                                <td> @{{ value }} </td>

                            </tr>

                        </tbody>

                    </table>

                </template>


</div>

<div id="root">
  <word :word-list="{{json_encode($commonWords) }}"></word>
</div>

<template id="word-template">
  <table class="table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(value, key) in wordList" :wordList="wordList">
        <td> @{{ key }} </td>
        <td> @{{ value }} </td>
      </tr>
    </tbody>
  </table>
</template>