Vuetify的slide-group组件自定义导航按钮状态不更新如何修复

问题根因 #

你调用原生按钮的click事件后，Vuetify更新导航按钮的disabled类名是异步渲染的，你同步执行checkNavBtnStatus时DOM还没完成更新，读取到的是旧的类名状态，所以按钮文本无法正确切换。此外直接查询DOM类名的方式高度依赖Vuetify内部实现，版本更新时类名变动会导致逻辑失效。

修复方案 #

方案1：快速适配现有代码 #

给状态检查逻辑套上$nextTick，等待DOM更新完成后再读取类名即可，修改点击方法如下：

methods: {
  // 其余逻辑保持不变
  clickLeft() {
    this.previousButton.click();
    this.$nextTick(() => {
      this.checkNavBtnStatus();
    })
  },
  clickRight() {
    this.nextButton.click();
    this.$nextTick(() => {
      this.checkNavBtnStatus();
    })
  }
}

方案2：推荐实现（无需操作DOM） #

直接通过ref获取v-slide-group组件实例，调用内置API和属性实现需求，稳定性更高：

1. 给slide-group组件添加ref标识

<v-slide-group ref="mySlideGroup">
  <!-- 原有slide内容 -->
</v-slide-group>

2. 替换原有逻辑，删除DOM相关的变量和查询代码：

<!-- 按钮可以合并写，无需两个v-if判断，还可直接绑定disabled属性避免无效点击 -->
<v-btn @click="clickLeft" :disabled="isPreviousBtnDisable">
  {{ isPreviousBtnDisable ? 'disable left' : 'enable left' }}
</v-btn>
<v-btn @click="clickRight" :disabled="isNextBtnDisable">
  {{ isNextBtnDisable ? 'disable right' : 'enable right' }}
</v-btn>

data() {
  return {
    isPreviousBtnDisable: true,
    isNextBtnDisable: false,
  };
},
mounted() {
  this.checkNavBtnStatus();
  // 监听滑动事件，滑动时自动更新按钮状态
  this.$refs.mySlideGroup.$on('update:model-value', this.checkNavBtnStatus)
},
methods: {
  checkNavBtnStatus() {
    const slideInstance = this.$refs.mySlideGroup
    // 直接读取组件实例内置的禁用状态，无需查询DOM
    this.isPreviousBtnDisable = slideInstance.prevDisabled
    this.isNextBtnDisable = slideInstance.nextDisabled
  },
  clickLeft() {
    // 直接调用组件内置左滑方法，无需模拟原生点击
    this.$refs.mySlideGroup.prev()
    this.checkNavBtnStatus()
  },
  clickRight() {
    // 直接调用组件内置右滑方法
    this.$refs.mySlideGroup.next()
    this.checkNavBtnStatus()
  }
}

内容的提问来源于stack exchange，提问作者Jack