Question

0

644

Visualizações

Có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?

over 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

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>

over 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-01T00:08:01.839Z

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>