Pass object data to styles in Vue.js

Question

I want to be able to pass data from a object to the in a single file component. However, it doesn\'t seem like this is possible.

What I\'

Answer 1

As far as I'm aware, you are not able to pass data from the component to its stylesheets.

The best practice as far as dynamic styling is to use v-bind:class or v-bind:style if needed. The <style> section should be used for the CSS templating language only.

<template>
    <p :style="{ backgroundColor: bgColor }">Lorem ipsum</p>
</template>

<script>
    export default {
        data() {
            return {
                bgColor: '#000'
            }
        }
    }
</script>

Let me know if you have any other questions!

Update

Since the goal is to use it for Sass functions like darken, I would recommend managing the various colors needed through utility classes instead.