How to use Vuetify color variables with ternary operator-CodePudding

I am trying to use some conditional logic to change the background color of a button. I have found posts on here that show you can in fact use the ternary operator to change the color prop but I have not found an example for users who liike to use the color variables defined in the theme options. If it is not possible is there a way to use the root defined variable color options?

            <v-btn 
                   fab
                   dark
                   color="{toggleEdit ? primary : secondary}"
                   @@click.stop="toggleEdit = !toggleEdit">
                <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
                <v-icon v-else dark>mdi-check</v-icon>
            </v-btn>

and

                <v-btn 
                   fab
                   dark
                   color="{toggleEdit ? 'var(--primary)' : 'var(--secondary)'}"
                   @@click.stop="toggleEdit = !toggleEdit">
                <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
                <v-icon v-else dark>mdi-check</v-icon>
            </v-btn>

CodePudding user response：

You should be using :color="{toggleEdit ? primary : secondary}", otherwise it will not be processed and passed as is.

And as per the docs here: https://vuetifyjs.com/en/api/v-btn/#props, the color props should be a string rather than an object, so I believe it should actually be:

:color="toggleEdit ? primary : secondary"

Hoping primary and secondary are available in local context, with color values as strings.

CodePudding user response：

You need to use below code instead:

<v-btn 
               fab
               dark
               :color="toggleEdit ? 'var(--primary)': 'var(--secondary)'"
               @@click.stop="toggleEdit = !toggleEdit">
            <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
            <v-icon v-else dark>mdi-check</v-icon>
</v-btn>