Vue.js：循环渲染卡片时动态背景颜色设置失效求助

问题说明 #

用Axios获取数据后遍历对象数组，想给部分元素设置不同背景颜色，但功能没生效。现有代码及数据结构如下：

原模板代码 #

<template>
  <div class="container">
    <div v-for="card in cards" :key="card.id" class="list">
      <div class="card-container" v-if="card.id == 1234 || 1236">
        <div class="card-container" v-bind:style="background">
        </div>
        <div class="card">
          <p class="card-title">{{ card.title }}</p>
        </div>
        <div class="card"> 
          <p class="card-short">{{ card.short }}</p>
          <router-link to="">See more</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

原脚本代码 #

import axios from 'axios';
export default {
  name:'Test',
  data(){
    return {
      cards: Object,
      background:{
        backgroundColor:'red'
      }    
    }
  },
  // 缺失Axios请求逻辑
}

数据结构 #

{
  "cards": [
    {"id": 1237,"name": "Card 1", "bg_color":"green"},
    {"id": 1236,"name": "Card 2", "bg_color":"yellow"},
    {"id": 1234,"name": "Card 3", "bg_color":"red"},
    {"id": 1233,"name": "Card 4", "bg_color":"blue"}
  ]
}

修复步骤 #

1. 修正错误的条件判断 #

原代码里v-if="card.id == 1234 || 1236"逻辑错误，1236是布尔真值，会导致所有元素都进入这个分支。正确写法：

v-if="card.id === 1234 || card.id === 1236"

2. 合并重复的DOM元素 #

模板里嵌套了两个card-container，结构混乱且无效，直接把样式绑定到外层容器上：

<div class="card-container" v-if="card.id === 1234 || card.id === 1236" :style="{ backgroundColor: card.bg_color }">

3. 复用数据里的背景色字段 #

既然每个卡片数据自带bg_color，没必要单独定义background变量，直接绑定该字段就能实现动态背景，每个符合条件的卡片会自动用自己的颜色。

4. 初始化cards为数组 #

原代码cards: Object初始化错误，应该设为空数组：

data(){
  return {
    cards: []
  }
}

5. 补充Axios请求逻辑 #

在created钩子中添加请求代码，获取数据并赋值给cards：

created() {
  axios.get('你的数据接口地址')
    .then(res => {
      this.cards = res.data.cards;
    })
    .catch(err => console.error('数据请求失败:', err));
}

完整修正代码 #

<template>
  <div class="container">
    <div v-for="card in cards" :key="card.id" class="list">
      <!-- 仅给指定id的卡片设置背景，若所有卡片都要则移除v-if -->
      <div class="card-container" v-if="card.id === 1234 || card.id === 1236" :style="{ backgroundColor: card.bg_color }">
        <div class="card">
          <p class="card-title">{{ card.name }}</p> <!-- 注意数据里是name不是title，需对应 -->
        </div>
        <div class="card"> 
          <p class="card-short">{{ card.short || '暂无简介' }}</p> <!-- 处理数据可能缺失的字段 -->
          <router-link to="">See more</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name:'Test',
  data(){
    return {
      cards: []
    }
  },
  created() {
    axios.get('你的数据接口地址')
      .then(res => {
        this.cards = res.data.cards;
      })
      .catch(err => console.error('数据请求失败:', err));
  }
}
</script>

额外注意事项 #

• 模板插值要和数据字段对应：原代码用card.title但数据里是card.name，必须统一；
• 若需要所有卡片都显示对应背景色，直接删掉v-if条件即可；
• 确保bg_color的值是有效的CSS颜色（比如"green"、"#ff0000"、"rgb(0,255,0)"等）。

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