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

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