CODEWITHSUNDEEP
vue.js
gb_spectrum
gb_spectrum

Reputation: 2301

Vue.js - class binding on a component via prop

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/

Upvotes: 0

Views: 1086

Answers (1)

ittus
ittus

Reputation: 22403

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

Upvotes: 1

Related Questions