Vue.js - class binding on a component via prop

Question

I'm trying to pass into a component, via prop, a color attribute, which will determine the background color of the component. The choices for the color attribute are 'red' and 'blue'.

The actual component is set up as the following:

Vue.component('greeting', {
    props: ['color'],
    template: '<div v-bind:class="{'add-red': color === 'red', 'add-blue': color === 'blue'}" class="box"></div>'
});

The actual color is passed in as follows:

<component color='red' :is='currentComponent'></component>

But I can't seem to get the class binding to work in my jsfiddle.

https://jsfiddle.net/cckLd9te/3217/

ittus · Accepted Answer · 2018-08-06 03:35:09Z

1

Your template is mixing between single quote ' and double quote ". You should use escape character

Vue.component('greeting', {
    props: ['color'],
  template: '<div v-bind:class="{\'add-red\': color === \'red\', \'add-blue\': color === \'blue\'}" class="box"></div>'
});

Demo

edited Aug 6, 2018 at 3:35

answered Aug 6, 2018 at 3:29

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Vue.js - class binding on a component via prop

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