Tengo este gran problema ya que no se me ocurre o encuentro la manera de hacer que cada card que se genera a partir de un v-for tenga un color diferente. Estoy usando Vue junto con Vuetify.
He intentado pasarle un :style bajo una propiedad computed, el cual genera un color aleatorio rgb de la siguinete manera
computed:{
colorAleatorio(){
let rojo = Math.floor(Math.random() * 256)
let verde = Math.floor(Math.random() * 256)
let azul = Math.floor(Math.random() * 256)
return `rgb(${rojo}, ${verde}, ${azul})`
}
}
Y esto lo paso con un :style a mi html
<v-card v-for="(pedido,i) in pedidos" :key="i" class="mx-auto mb-4" max-width="600">
<v-card-title :style="[{backgroundColor: colorAleatorio}]"></v-card-title>
<v-card-title>
<v-row>
<v-col cols="7">
<v-list-item >
<v-list-item-content>
<v-list-item-title>Cliente: {{pedido.nombre_cliente}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-col>
<v-col cols="5">
<v-list-item >
<v-list-item-content>
<v-list-item-title >{{sumarValores(pedido.productos) | moneda}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-col>
</v-row>
</v-card-title>
Pero el resultado es que me pinta el mismo color para todas las cards, cuando actualizo el navegador de la aplicación si cambia el color pero para todas y no para cada una de ellas.
Alguna idea de u orientación de una posible solución?
Saludos.