VUE JS没有渲染的成分
问题描述:
这是我的html:VUE JS没有渲染的成分
<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)
答
在HTML中,除去v-bind
:
<div id="modalComponent">
<remodal-designs designid="1074"></remodal-designs>
</div>
v-bind使用时动态地绑定一个或多个属性或组件道具的表达或vue数据。在你传递一个常量的时候,这是不需要的。
请勿在开发中使用缩小版本,否则您将无法获取所有控制台错误。更改为非缩小版本并查看是否有任何错误。 –
啊,好的,谢谢! –
@craig_h我编辑了主帖子 –