How to apply css styles from javascript variable

Question

I have the following situation: There are css rules inside of my JS var which looks like this:

         "floating_icons": {
                    "main_color": "",
                    "phone_color": "",
                    "mail_color": "",
                    "whatsapp_color": ""
                }
            },
            "style_css": ".pad-t { padding: 0 20px 0 20px;} .grey-t { color: rgba(127.765849375934, 127.765849375934, 127.765849375934, 0.217430264}"
        }
    },
    "entity": {
        "data": {
            "data": { 

And I need to apply 'style_css' it in my VueJS application. Unfortunatelly I didn't find any propriate solution for it. Could you please help me out with it?

Answer 1

Binding Inline Styles guide for the Vuejs v2

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:

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

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

It is often a good idea to bind to a style object directly so that the template is cleaner:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Again, the object syntax is often used in conjunction with computed properties that return objects.

Array Syntax The array syntax for v-bind:style allows you to apply multiple style objects to the same element:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

You should read the full guide at https://v2.vuejs.org/v2/guide/class-and-style.html