[英]vue.js not rendering a component
这是我的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)
在 HTML 中,删除v-bind
:
<div id="modalComponent">
<remodal-designs designid="1074"></remodal-designs>
</div>
v-bind用于将一个或多个属性或组件 prop 动态绑定到表达式或 vue 数据。 在这里,您正在传递一个常量,因此不需要它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.