0
332
ViewsCómo configurar una tarjeta vuetify de diferentes colores con foreach VUEJS
Declaración del problema: estoy creando tarjetas con vuetify que se repetirán en foreach, pero quiero que cada tarjeta tenga un color diferente que obtengo de mi función generateColor() , esto es lo que quiero decir :
ProyectoCard.vue :
<template> <v-card :color="colorCard"> <v-row>{{ projectName }}</v-row> <v-row>{{ projectDecs }}</v-row> <v-row>{{ deadline }}</v-row> </v-card> </template> <script> export default { props: { projectName: String, projectDecs: String, deadline: String, colorCard: String, }, }; </script>Proyecto.vue :
<template> <v-container> <v-row> <v-col v-for="(project, index) in projects" :key="index"> <project-card :projectName="project.name" :projectDesc="project.desc" :deadline="project.date" :colorCard="this.color" ></project-card> </v-col> </v-row> </v-container> </template> <script> import ProjectCard from "@/components/ProjectCard.vue"; export default { components: { ProjectCard, }, data() { return { color: "", projects: [ { name: "Learning laravel", desc: "Finish video asap", date: "28", }, { name: "Learning laravel", desc: "Finish video asap", date: "28", }, ], }; }, mounted(){ this.generateColor() }, methods: { generateColor() { const colors = ["#c07bc3", "#a6dcaf", "#ddddce"]; this.color = colors[Math.floor(Math.random() * colors.length)]; }, } }; </script> Sé que no podemos definir el color como accesorio :color="ColorCard" , y me estoy quedando sin ideas, ¿alguien puede ayudarme?
·
Juan Pablo Isaza
2 answers
Answer question0
Puede intentar llamar al método para obtener un color aleatorio:
Vue.component('projectCard', { template: ` <v-card :color="colorCard"> <v-row>{{ projectName }}</v-row> <v-row>{{ projectDecs }}</v-row> <v-row>{{ deadline }}</v-row> </v-card> `, props: { projectName: String, projectDecs: String, deadline: String, colorCard: String, }, }) new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { colors: ["#c07bc3", "#a6dcaf", "#ddddce"], projects: [ {name: "Learning laravel", desc: "Finish video asap", date: "28",}, {name: "Learning laravel", desc: "Finish video asap", date: "28",}, ] } }, methods: { setColor() { return this.colors[Math.floor(Math.random() * this.colors.length)] }, }, }) <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"> <div id="app"> <v-app> <v-main> <v-container> <v-row> <v-col v-for="(project, index) in projects" :key="index"> <project-card :project-name="project.name" :project-desc="project.desc" :deadline="project.date" :color-card="setColor()" ></project-card> </v-col> </v-row> </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>
·
Juan Pablo Isaza
Report
0
Lo que está tratando de hacer aquí es que está asignando un solo color para cada tarjeta, pero debe ser dinámico. Entonces, lo que puede intentar es asignar una propiedad de color en cada objeto de la matriz de projects y luego enlazar de la misma manera :color="colorCard" .
Creé esta demostración simple para su comprensión :
new Vue({ el: '#app', vuetify: new Vuetify(), data: { cardsDetails: [{ title: 'Card A' }, { title: 'Card B' }, { title: 'Card C' }] }, created() { this.generateColor(); }, methods: { generateColor() { const colors = ["#c07bc3", "#a6dcaf", "#ddddce"]; this.cardsDetails.forEach(obj => { const color = colors[Math.floor(Math.random() * colors.length)]; obj.colorCard = color; }); } } }) .mx-auto { margin: 5px } <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.7/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.7/dist/vuetify.min.css"/> <div id="app"> <v-app id="inspire"> <v-card v-for="(card, index) in cardsDetails" :key="index" class="mx-auto" max-width="344" :color="card.colorCard" > <v-card-text> <div>{{ card.title }}</div> </v-card-text> </v-card> </v-app> </div>
·
Juan Pablo Isaza
Report
Answer question