Estoy tratando de usar alguna lógica condicional para cambiar el color de fondo de un botón. He encontrado publicaciones aquí que muestran que, de hecho, puede usar el operador ternario para cambiar el accesorio de color, pero no he encontrado un ejemplo para los usuarios a los que les gusta usar las variables de color definidas en las opciones del tema. Si no es posible, ¿hay alguna manera de usar las opciones de color variable definidas por la raíz?
<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>y
<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>Debería usar :color="{toggleEdit ? primary : secondary}" , de lo contrario, no se procesará ni pasará tal cual.
Y según los documentos aquí: https://vuetifyjs.com/en/api/v-btn/#props , los accesorios de color deberían ser una cadena en lugar de un objeto, así que creo que en realidad debería ser:
:color="toggleEdit ? primary : secondary"Con la esperanza de que el primario y el secundario estén disponibles en el contexto local, con valores de color como cadenas.
De acuerdo, si las variables primary o secondary no están disponibles en el contexto local (como propiedades en los datos del componente envolvente), puede acceder a los colores de su tema predeterminado con:
:color="toggleEdit ? $vuetify.theme.themes.light.primary : this.$vuetify.theme.themes.light.secondary" Donde puede intercambiar light con dark según su configuración.
Si necesita establecer variables CSS, la propiedad customProperties debe estar habilitada en la configuración de su tema (consulte los enlaces de referencia a continuación para saber cómo). Después de eso, puede acceder a sus variables de color como se indica a continuación:
:color="toggleEdit ? 'var(--v-primary-base)' : 'var(--v-secondary-base)'"Referencias: https://vuetifyjs.com/en/features/theme/#customizing https://vuetifyjs.com/en/features/theme/#custom-properties
En su lugar, debe usar el siguiente código:
<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>Verifique el siguiente fragmento por favor:
* { --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>