I am trying to override the default navigation buttons come with vuetify slide group with new buttons as below.
<v-btn @click="clickLeft" v-if="isPreviousBtnDisable">
disable left
</v-btn>
<v-btn @click="clickLeft" v-else>
enable left
</v-btn>
<v-btn @click="clickRight" v-if="isNextBtnDisable">
disable right
</v-btn>
<v-btn @click="clickRight" v-else>
enable right
</v-btn>
data() {
return {
previousButton: "",
nextButton: "",
isPreviousBtnDisable: true,
isNextBtnDisable: false,
};
},
mounted() {
this.checkNavBtnStatus();
},
methods: {
checkNavBtnStatus() {
this.previousButton = document.querySelector(".v-slide-group__prev");
this.nextButton = document.querySelector(".v-slide-group__next");
this.isPreviousBtnDisable = this.previousButton.className.includes("disabled");
this.isNextBtnDisable = this.nextButton.className.includes("disabled");
},
clickLeft() {
this.previousButton.click();
this.checkNavBtnStatus();
},
clickRight() {
this.nextButton.click();
this.checkNavBtnStatus();
}
}
As in the above code I am trying to change the button's text based on slide group's previous and next buttons status. Even though slide navigation happens properly button's text change not working fine. What could be the fix for this?
Instead of using 2 buttons for each side you could use the Vue "Mustache" syntax:
<v-btn @click="clickLeft">
{{ isPreviousBtnDisable? 'disable' : 'enable' }} left
</v-btn>
<v-btn @click="clickRight">
{{ isNextBtnDisable ? 'disable' : 'enable' }} right
</v-btn>