1

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.

1
  • Por favor, edita la pregunta para limitarla a un problema específico con suficiente detalle para identificar una respuesta adecuada.
    – Comunidad Bot
    Commented el 10 feb. 2022 a las 8:42

1 respuesta 1

1

En vez de usar computed, usa un método para generarlo, recuerda que el computed solo se vuelve a ejecutar/actualizar si cambia alguna de las variables que utiliza.

new Vue({
  el: "#app",
  methods: {
    genColor(){
      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})`
    }
  }
})
.card {
  padding: 20px;
  margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="i in [1,2,3,4]" :style="[{backgroundColor: genColor()}]" class="card">
    Card {{ i }} 
  </div>
</div>

Ahora tengo dos tips:

  1. Ten en cuenta que sería mejor seleccionar los colores de un arreglo de colores predefinidos, incluso usar clases, de esa forma defines de antemano los colores de los fondo y del texto y no tendrás sorpresas como un verde fosforescente de fondo.

  2. Si no quieres que al refrescar cambie de color, puedes utilizar el id de tu elemento como índice, por ejemplo si tienes el id 17678 y tienes 10 colores definidos, le sacas el residuo 17678 % 10 y siempre te devolverá el octavo color, para el usuario será un color aleatorio, pero así de F5 será el mismo.

1
  • Funciono a la perfección, fue de gran ayuda tu respuesta.
    – Erick
    Commented el 10 feb. 2022 a las 23:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.