vue.js 不渲染组件答案

【问题标题】：vue.js not rendering a componentvue.js 不渲染组件
【发布时间】：2017-02-22 14:48:42
【问题描述】：

这是我的html：

<div id="modalComponent">
    <remodal-designs v-binds:designid="1074"></remodal-designs>
</div>

这是我在 html 中的脚本：

<script src="{{ FuImg::asset('js/libs/vue.min.js') }}"></script>
<script src="{{ FuImg::asset('js/vue_components/remodal_designs.js') }}"></script>

这是我的 Vue js 组件：

Vue.component('remodal-designs', {

    template : '<div id="modaldesigns" class="cp-remodal remodal" :data-remodal-id="designid">\
                    <button data-remodal-action="close" class="remodal-close"></button>\
                    <div class="container">\
                        <div class="row no-gutter">\
                            <div class="col-sm-6">\
                                <div class="cp-tab-menu active">\
                                    Camisetas Premium\
                                </div>\
                            </div>\
                            <div class="col-sm-6">\
                                <div class="cp-tab-menu">\
                                   Camisetas Basic\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
    ',

    props : ['designid'],



});

组件未呈现。当我打开 chrome 浏览器并使用 Ctrl + U 查看代码时，什么也没做。

Chrome 控制台不返回错误。

我做错了什么？

编辑：vue 控制台报告这个

[Vue warn]: failed to compile template:

<div id="modalComponent">
    <remodal-designs v-bind:designid="5rpexo1zwci6"></remodal-designs>
</div>

- invalid expression: v-bind:designid="1074"


(found in root instance)

【问题讨论】：

不要在开发中使用缩小版，否则你不会得到所有的控制台错误。换成非缩小版看看有没有错误。
@craig_h 我编辑了主帖
能否添加您在主 vue 实例中使用的 data？
您只需要拥有designid="1074"，删除v-bind，因为您没有将它分配给任何vue数据变量。
你的 main.js 中有什么？

标签： javascript vuejs2 vue-component vue.js

【解决方案1】：

在 HTML 中，删除 v-bind:

<div id="modalComponent">
    <remodal-designs designid="1074"></remodal-designs>
</div>

v-bind 用于将一个或多个属性或组件道具动态绑定到表达式或 vue 数据。在这里，您传递了一个常量，因此不需要它。

【讨论】：