current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

Is there any way to get data as props in vueJs component and use the value inside section?

something like :

<my-component color="red" >

and to use red as a dynamic value inside section of component.

share|improve this question
up vote 0 down vote

v-bind can help you with dynamic styling in vue.js as explained here.

The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:

HTML

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

vue instance

data: {
  activeColor: 'red',
  fontSize: 30
}

Now activeColor is reactive here, whenever you change activeColor it will change in the HTML/CSS as well.

share|improve this answer
    
I want to use data value inside <style></style> section. like : <style> .className { color: color-data } </style> – SaJed yesterday
    
@SaJed I dont think that is possible, whats possible is you can have different CSS classes and you can change those classes dynamically as explained here – Saurabh yesterday
    
actually I'm useing datepicker which I need to override its classes to match with my theme color – SaJed yesterday
    
I have hardcoded this class and it works fine but can't make it flexible: .calendar .cell.highlighted { color: #ffffff; background-color: #4f8fcc!important; } #4f8fcc should set with props value – SaJed yesterday
1  
@SaJed I am using vue-datepicker where I can send color etc in the option variable. – Saurabh yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.