How to change the badge status color in VueJS-CodePudding

I want to change the color of badge status <li>Status: <b-badge variant="warning"> {{contract.status}} </b-badge></li>, by default the color is yellow because it is pending but when it goes to confirmed it will be in green and when it will be expired or declined in red. the status of the contracts are taken from the API, how can I change the color in VueJS?

this is my code:

<div v-if="teammate.contracts.length !== 0" v-for="contract in teammate.contracts" >
    <h6>Contract</h6>
    <li>Status: <b-badge variant="warning"> {{contract.status}}</b-badge></li>           
    <li>Working time: {{contract.contract_data.hiring_contract_time}}</li>
    <li> Hiring type: {{contract.contract_data.hiring_type}}</li>
    <li> Hired by: {{contract.contract_data.contract_project_type}}</li>
</div>

CodePudding user response：

A good approach would be to implement variant type as a computed property that changed accordingly

variant() {
    if (status == 'confirmed') {
        return 'success';
    } else if (status === 'declined') {
        return 'error';
    } else {
        return 'warning';
    }
}

you will have to adapt that to your use case.

And then you can use this computed property in your template like this

<b-badge :variant="variant"> {{contract.status}} </b-badge>