vue.js不呈现组件

Question

这是我的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)

Answer 1

在HTML中，删除v-bind：

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

当您将一个或多个属性或组件prop动态绑定到表达式或vue数据时，将使用v-bind。在这里，因为你传递一个常数所以不需要它。