Question

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

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

代码如下所示：

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一起使用，这就是为什么在双花括号之前有@的原因。

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

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

Vue.js表在外面呈现

1 个答案: