Returning multiple vue class using one method - vue.js

Question

I'm using vue and in my vue page I have the bootstrap pill nav.
My page has 2 pills. One is "Approved" and the other is "Declined".
What I'm tring to do is that if you've been declined then you will only see the "Declined" pill and if you've been approved then you can
see the "Approved" pill.
The problem I'm having is that I'm not sure how I can return 2 classes, because the bootstrap uses 2 classes to show the information "show active"
and I would like to be able to use one method to be able to display those classes.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" :class="showApprovedClass" id="pills-approved-tab" data-toggle="pill" href="#pills-approved" role="tab" aria-controls="pills-approved" aria-selected="true">Approved</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="showDeclinedClass" id="pills-declined-tab" data-toggle="pill" href="#pills-declined" role="tab" aria-controls="pills-declined" aria-selected="false">Declined</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" :class="showApprovedClass" id="pills-approved" role="tabpanel" aria-labelledby="pills-approved-tab">
approved stuff
</div>
<div class="tab-pane fade" :class="showDeclinedClass" id="pills-declined" role="tabpanel" aria-labelledby="pills-declined-tab">
Declined stuff
</div>
</div>
export default {
data() {
show: false,
active: false
},
computed: {
showDeclinedClass(){
if(user.stage === 'declined'){
return 'show active'
}
},
showApprovedClass(){
if(user.stage === 'approved'){
return 'show active'
}
}
}
}

Answer 1

You can update Approved and Declined pill elements class like:
<a class="nav-link" :class="getClass('approved')" .... >Approved</a>
<a class="nav-link" :class="getClass('declined')" .... >Declined</a>
and then create a new method like:
methods:{
getClass( stage ){
return user.stage === stage ? 'show active' : '';
}
}
Demo:
new Vue({
el: "#myApp",
data: {
user: { stage: 'approved' }
},
methods: {
getClass(stage) {
return this.user.stage === stage ? 'btn-primary' : 'btn-secondary';
},
toggle() {
this.user.stage = this.user.stage === 'approved' ? 'declined' : 'approved';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<div class="row">
<div class="col">
<button :class="getClass('approved')" class="btn btn-md btn-block m-3">Approved</button>
</div>
<div class="col">
<button :class="getClass('declined')" class="btn btn-md btn-block m-3">Declined</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-md btn-success m-3" #click="toggle()">Click Me!</button>
</div>
</div>
</div>