我想更改徽章狀態的顏色<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>
uj5u.com熱心網友回復：
一個好的方法是將變體型別實作為一個計算屬性，并相應地改變
variant() {
if (status == 'confirmed') {
return 'success';
} else if (status === 'declined') {
return 'error';
} else {
return 'warning';
}
}
您將不得不使其適應您的用例。
然后你可以像這樣在你的模板中使用這個計算屬性
<b-badge :variant="variant"> {{contract.status}} </b-badge>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385868.html