Vue.js中v-for循环渲染Vuetify卡片如何为每个卡片设置不同颜色

当前实现所有卡片同色的核心原因有两个：

1. 你仅在父组件mounted生命周期执行了一次generateColor()，只生成了1个存在this.color中的颜色值，循环渲染时所有卡片绑定的都是这同一个全局变量
2. 原有generateColor()方法没有返回值，仅做变量赋值，无法在循环单次调用时拿到独立颜色值

另外代码里还有两个容易踩的小问题：

• 模板内绑定属性写了多余的this.前缀，Vue模板可直接访问实例属性方法，不需要加this
• 子组件定义的描述prop名为projectDecs（拼写错误，正确缩写应为desc），父组件传值时写的是projectDesc，拼写不匹配会导致描述内容无法正常渲染

方案1：循环时实时生成独立颜色（改动最小） #

直接修改父组件逻辑，删除冗余的单一color变量，调整generateColor()为返回颜色值的形式，在v-for循环内每次渲染卡片时单独调用方法生成颜色即可。

修正后的Project.vue代码如下：

<template>
  <v-container>
    <v-row>
      <v-col v-for="(project, index) in projects" :key="index">
        <project-card
          :projectName="project.name"
          :projectDecs="project.desc"
          :deadline="project.date"
          :colorCard="generateColor()"
        ></project-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import ProjectCard from "@/components/ProjectCard.vue";
export default {
  components: {
    ProjectCard,
  },
  data() {
    return {
      projects: [
        {
          name: "Learning laravel",
          desc: "Finish video asap",
          date: "28",
        },
        {
          name: "Learning laravel",
          desc: "Finish video asap",
          date: "28",
        },
      ],
    };
  },
  methods: {
    generateColor() {
      const colors = ["#c07bc3", "#a6dcaf", "#ddddce"];
      return colors[Math.floor(Math.random() * colors.length)];
    },
  }
};
</script>

ProjectCard.vue组件不需要做任何修改，即可实现每张卡片独立随机色的效果，预期效果如下：

方案2：预生成固定颜色（体验更优） #

如果不希望组件重渲染时卡片颜色随机跳变，可以在初始化项目列表时，就为每个项目项预先生成绑定好固定颜色，渲染时直接读取即可：

// 可在created生命周期、接口请求拿到项目数据后执行预处理
this.projects = this.projects.map(project => ({
  ...project,
  cardColor: this.generateColor()
}))

模板内绑定方式调整为：

<project-card
  :projectName="project.name"
  :projectDecs="project.desc"
  :deadline="project.date"
  :colorCard="project.cardColor"
></project-card>

这种方案生成的颜色和项目数据绑定，不会因为组件重渲染变化，适合正式生产环境使用。

• 建议统一修正prop拼写错误，将子组件的projectDecs改为projectDesc，和常规命名保持一致，避免后续传值混乱
• 如果卡片数量小于等于预设颜色数组长度，可以增加去重逻辑，避免相邻卡片出现重复颜色

内容的提问来源于stack exchange，提问作者Killian Pierce