Vue.js 表在外面渲染答案

【问题标题】：Vue.js table is rendered outsideVue.js 表在外面渲染
【发布时间】：2017-08-29 19:26:28
【问题描述】：

我正在尝试渲染表格。数据是动态的并且来自一个数组。它工作正常，except: 表格内容呈现在页面顶部的表格之外。

我希望它在表格内呈现。有人可以帮忙吗？

代码如下：

Vue.js：

Vue.component('word', {

    props: ['word-list'],

    template: '#word-template'


});

new Vue({
    el: '#root'

});

HTML：

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

注意：这是与 Laravel 一起使用的，这就是为什么在双花括号之前有一个 @。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

你不能为你的组件定义模板在你的Vue模板。你需要把它移到外面。

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

如果您将组件的模板留在根模板中，则根会将组件的模板编译为它自己模板的一部分。

【讨论】：