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 控制台没有 return 错误。

我做错了什么？

编辑：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 动态绑定到表达式或 vue 数据。此处因为您传递的是常量，所以不需要它。

vue.js 未渲染组件

vue.js not rendering a component

javascript

vue.js

vue-component

vuejs2