Estoy atascado en algo muy simple, probablemente para los profesionales de VueJS.
Tengo en mis datos objetos JSON con un atributo que puede tomar los valores 10, 20, 30, 40. Dependiendo de este valor, quiero que el color de un v-btn sea diferente.
Intenté varios métodos, pero cada vez recibía un error.
Este :
<v-btn class="flex-column pa-6" :class="getColor(item.type)" >y getColor se define en el método.
getColor: function(type) { return this.color[type] }Intenté esto:
<v-btn class="flex-column pa-6" v-bind:class= "[item.type == '10' ? color['10'] : color['20'] ]" >Y eso funciona, pero siempre es color['20']
¿Por qué mi condición no funciona?
Mi v-para arriba:
<v-card v-for="incident in incidents" :key="incident" class="mx-auto" >Su código se ve bien, solo una cosa que noto es que debe usar !important en los estilos para anular el estilo predeterminado de v-btn .
Demostración de trabajo:
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { items: [{type: 10}, {type: 40}, {type: 30}], color: { 10: 'purple', 40: 'blue', 30: 'green' } } }, methods: { getColor(type) { return this.color[type] } } }) .blue { background-color: blue !important; } .purple { background-color: purple !important; } .green { background-color: green !important; } <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <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> <div id="app"> <div v-for="(item, index) in items" :key="index"> <v-btn v-bind:class="getColor(item.type)"> {{ getColor(item.type) }} </v-btn> <br><br> </div> </div>Si te entendí correctamente, prueba como en el siguiente fragmento:
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { incidents: [{type: 10, name: 'aaa'}, {type: 40, name: 'bbb'}, {type: 30, name: 'ccc'}], colors: [{id: 10, color: 'purple'}, {id: 20, color: 'blue'}, {id: 30, color: 'green'}, {id: 40, color: 'red'}] } }, methods: { getColor(id) { return this.colors.find(c => c.id === id)?.color || '' } } }) .blue { background-color: blue; } .purple { background-color: purple; } .green { background-color: green; } <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <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"> <div id="app"> <v-app> <v-main> <v-container> <v-card v-for="(incident, i) in incidents" :key="i" class="mx-auto" > <v-btn class="flex-column pa-6" :class= "getColor(incident.type)" > {{ incident.name }} </v-btn> </v-card> </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>