This is my custom HTML code:
<div id="modalComponent">
<remodal-designs v-binds:designid="1074"></remodal-designs>
</div>
Here are the scripts included in the HTML:
<script src="{{ FuImg::asset('js/libs/vue.min.js') }}"></script>
<script src="{{ FuImg::asset('js/vue_components/remodal_designs.js') }}"></script>
Additionally, this is my Vue.js component setup:
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'],
});
I'm facing an issue where the component is not rendering properly. When checking the browser source code using Ctrl + U, there seems to be no changes being applied. https://i.sstatic.net/EvEoO.jpg
No errors are displayed in the Chrome console.
What could be the reason for this problem?
UPDATE: The Vue console reports the following warning message:
[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)