How to use Vuetify color variables with ternary operator

user_13584357 0
Viewed 474

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 class="mx-2"
                   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 class="mx-2"
                   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>
vuejs3 vuetify.js vue.js javascript
3 Answers

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.

Okay if primary or secondary variables are not available in the local context (as properties in data of the wrapping component), you can access your default theme colors with:

:color="toggleEdit ? $vuetify.theme.themes.light.primary : 
    this.$vuetify.theme.themes.light.secondary"

Where you can interchange light with dark as per your configuration.

If you need to set CSS variables then the property customProperties must be enabled in your theme configuration (check the reference links below to know how). After that you can access your color variables as given below:

:color="toggleEdit ? 'var(--v-primary-base)' : 'var(--v-secondary-base)'"

References: https://vuetifyjs.com/en/features/theme/#customizing https://vuetifyjs.com/en/features/theme/#custom-properties

user_28634390

You need to use below code instead:

<v-btn class="mx-2"
               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>
user_101585510

Check following snippet pls:

* {
  --primary: goldenrod;
  --secondary: seagreen;
}
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-btn class="mx-2"
               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>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() {
        return {
          toggleEdit: false
        }
      }
    })
  </script>
</body>
</html>

user_119891890
Related