How to set different color vuetify card with foreach VUEJS

Problem statement - I'm creating cards with vuetify that will loop in foreach, but I wanna each card has different color that I get from my generateColor() function, here's what I mean :

ProjectCard.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>

Project.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>

I know we can't define color as a prop :color="ColorCard", and I'm running out ideas, anybody can help?

Solution

You can try to call method for random color:

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>