Garmaine Staff asked 1 year ago

I need some help trying to figure out how to give the v-bind:class multiple options. I am creating an Uno game and as it loops through your cards, it 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. I have searched everywhere online and 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;
}