Vue.js:更改背景颜色无效

Question

我正在使用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'
}    
}
},
What the object looks like
} "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},
] here

Answer 1

因为您的内容不在您已设置样式的card-container中。

<template>
<div id="app">
<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 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>
</div>
</div>
</template>