How to send a color as a props in Vue?

Question

This is my Button vue Object. I want to change the color based on the props

<template>
    <div class="get-started-btn flex center"
         style="cursor: pointer;
            padding: 0px 15px;
            height: 36px;
            color: {{color}} ">
            {{text}}
    </div>
</template>

<script>
    export default {
        name: "Button",
        props:{
            text:String,
            color: String,
            backgroundColor: String,
        }
    }
</script>

<style scoped>
.get-started-btn{
    background-color: {{backgroundColor}};
}
</style>

For example:

    <Button text="Mark As Done" color="white" backgroundColor="#1cb86e"></Button>

or

  <Button text="Get Started" color="white" backgroundColor="#299ff6"></Button>

But it is not compiling

check if this link helps : https://stackoverflow.com/questions/42872002/in-vue-js-component-how-to-use-props-in-css — Anuradha Kumari, May 10 '19 at 16:35

score 10 · Accepted Answer · answered May 10 '19 at 16:32

10

<Button text="Get Started" :style="{ 'background-color': YOURCOLORVARIABLEHERE }"></Button>

I Think you can take a look on that article https://alligator.io/vuejs/dynamic-styles/

They explain exactly what you wanna do.

answered May 10 '19 at 16:32

Robson Braga

432
3
8

How to send a color as a props in Vue?

1 Answers1