javascript - 自定义 vuetify 幻灯片组中的导航按钮

Question

我正在尝试使用以下新按钮覆盖 vuetify 幻灯片组附带的默认导航按钮。

<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();
  }
}

在上面的代码中，我试图根据幻灯片组的上一个和下一个按钮状态更改按钮的文本。即使幻灯片导航正确发生按钮的文本更改也无法正常工作。有什么办法可以解决这个问题？

标签： javascriptvue.jsslidervuetify.js

Answer 1

您可以使用 Vue “Mustache”语法，而不是每边使用 2 个按钮：

<v-btn @click="clickLeft">
  {{ isPreviousBtnDisable? 'disable' : 'enable' }} left
</v-btn>
<v-btn @click="clickRight">
  {{ isNextBtnDisable ? 'disable' : 'enable' }} right
</v-btn>