VueJS - Binding custom prop doesn't work with b-form component

Question

I follow this vue doc to create a custom component with a custom attribute like this:

    Vue.component('y-form-checkbox', {
    props: ['chkLabel'],
    template: `<b-form-group label="label">
                <b-form-checkbox>
                  {{ chkLabel }}
                </b-form-checkbox>
            </b-form-group>`
    });

And then I use this component like following:

<y-form-checkbox chkLabel="Something special"></y-form-checkbox>

But the problem is that the chkLabel doesn't bind to the component's template as expected. I just got a checkbox without label. Why this happens? Thanks in advance!

Boussadjra Brahim · Accepted Answer · 2019-08-07 11:33:23Z

2

You should use the cabab-case format instead of the camelCase one when dealing wthi props :

 <y-form-checkbox chk-label="Something special"></y-form-checkbox>

and keep it in camelCase format in component props declaration :

  Vue.component('y-form-checkbox', {
    props: ['chkLabel'],
    template: `<b-form-group label="label">
                <b-form-checkbox>
                  {{ chkLabel }}
                </b-form-checkbox>
            </b-form-group>`
    });

edited Aug 7, 2019 at 11:33

answered Aug 7, 2019 at 11:24

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

VueJS - Binding custom prop doesn't work with b-form 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