In the Vue site I'm working on, there is a functional button that changes its state when clicked (from "pause" to "resume" and also changes colors). The button functionality itself works perfectly, but I am facing an issue in aligning it with another value on the same page. There is a function that contains an object called details, which has a key named status holding values of either "H" or "P".
My goal now is to ensure that upon page load, if the status is "H", the button should display 'Resume', and if it's "P", the button should display 'Pause' (meaning, turn off isOpen for "H" and turn it on for "P"). Unfortunately, I can't include conditional statements in the data return. Is there a way to achieve this using computed properties?
<button class="btn btn-block" :style="{ color: pauseButton.textColor, backgroundColor: pauseButton.background, border: none, borderRadius: .15 }" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false">
{{ pauseButton.text }}
</button>
data() {
return {
details: [],
pauseButton: {
text:'Pause',
textColor: '#6c757d',
background: '#BDE5F8'
},
isOpen: true,
}
},
pauseTask: function() {
this.isOpen = !this.isOpen;
//This line doesn't function as intended
if(this.details[0].status === 'H'){
!this.isOpen;
}
this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
},