I need some help trying to figure out how to give the v-bind:class multiple options.
My Uno game, as it loops through your cards, needs to look at the cards color which is in a list of objects ex. ([{ Color: green, Value: 6}]
and determine what color of text the card should be.
This is what I have come up with so far:
Vue.js
getClass: function(card){
var result = [];
console.log(card);
if (card.Color == "red"){
result.push('red');
}else if (card.Color == "green"){
result.push('green');
}else if (card.Color == "blue"){
result.push('blue');
}else if(card.Color == "yellow"){
result.push('yellow');
}
console.log(result);
return result;
},
HTML
<ul id="myCards">
<button id="myCard" v-for="card in myCards" v-bind:class="getClass(card)"
@click="playCard(card)">
{{card.Color}} {{card.Value}}
</button>
</ul>
CSS
ul{
text-align: left;
}
#myCards{
padding: none;
}
#myCard{
display: inline-block;
height: 100px;
width: 70px;
border: 1px solid black;
color: black;
border: 2px solid black;
border-radius: 6px;
background-color: white;
color: black;
vertical-align: middle;
margin: 5px;
}
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
.yellow{
color: yellow;
}
:class:'card.Color'
which doesn't work, so i edited my answer using the style binding