vue.js not rendering a component

Question

This is my html:

<div id="modalComponent">
    <remodal-designs v-binds:designid="1074"></remodal-designs>
</div>

This is my scripts in the html:

<script src="{{ FuImg::asset('js/libs/vue.min.js') }}"></script>
<script src="{{ FuImg::asset('js/vue_components/remodal_designs.js') }}"></script>

And this is my Vue js component:

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'],



});

The component is not rendering. When I open the chrome browser and use Ctrl + U to see the code, nothing is being done.

The Chrome console not return errors.

What am I doing wrong?

EDIT: the vue console report this

[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)

Don't use the minified version in development otherwise you won't get all the console errors. Change to the non minified version and see if you get any errors. — craig_h
– craig_h, Commented Feb 22, 2017 at 14:51
Could you add the data you are using in your main vue instance? — craig_h
– craig_h, Commented Feb 22, 2017 at 15:10
You just need to have designid="1074", remove v-bind as you are not assigning it to any vue data variable. — Saurabh
– Saurabh, Commented Feb 22, 2017 at 15:14

tony19 · Accepted Answer · 2022-07-15 22:24:30Z

3

In HTML, remove v-bind:

<div id="modalComponent">
    <remodal-designs designid="1074"></remodal-designs>
</div>

v-bind is used when you dynamically bind one or more attributes or a component prop to an expression or vue data. Here as you are passing a constant so it is not needed.

edited Jul 15, 2022 at 22:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 22, 2017 at 15:15

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js not rendering a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related