如何在VueJS中更改徽章状态颜色

Question

我想更改徽章状态<li>Status: <b-badge variant="warning"> {{contract.status}} </b-badge></li>的颜色，默认情况下，颜色为黄色，因为它处于挂起状态，但当它进入确认状态时，颜色将为绿色，当它过期或被拒绝时，颜色为红色。合同的状态取自API，如何更改VueJS中的颜色？

这是我的代码：

<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>

Answer 1

一个好的方法是将变量类型实现为一个相应改变的计算属性

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

您必须将其适应您的用例。

然后你可以在你的模板中使用这个计算属性，比如这个

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