Vue Bootstrap标签页需点击两次才能切换至下一页的问题排查

点击标签页的"Next"按钮后无法立即切换到下一页，需再次点击才能生效，核心原因和解决方法如下：

问题根源 #

这是Vue响应式更新的异步特性导致的：

• 校验成功后，你先设置mapingDisabled = false，紧接着修改tabIndex++，但此时Vue还没来得及更新DOM中第二标签页的disabled状态。
• b-tabs组件会拒绝切换到处于disabled状态的标签页，所以第一次修改tabIndex的操作被组件忽略。
• 第二次点击时，disabled状态已经完成DOM更新，此时修改tabIndex就能正常触发标签切换。

修复方案 #

通过this.$nextTick()延迟修改tabIndex，确保标签页的disabled状态完成DOM更新后，再执行切换操作：

修改validateSetting方法 #

validateSetting() {
    this.$refs.validateSetting.validate().then((success) => {                       
        if (success) {
            this.mapingDisabled = false;
            // 等待DOM更新完成后再切换标签
            this.$nextTick(() => {
                this.tabIndex++;
            });
            if (this.countHTTP == 0) {
                this.callHttp();
                this.countHTTP++;
            }
        }
    });
},

修改validateEditMapping方法 #

validateEditMapping() {
    this.$refs.validateEditMapping.validate().then((success) => {
        if (success) {
            this.safetyDisable = false;
            // 等待DOM更新完成后再切换标签
            this.$nextTick(() => {
                this.tabIndex++;
            });
        }
    });
},

额外优化提示 #

你的callHttp方法里存在上下文错误：setTimeout内部的this.loadDone = true中的this指向的是window而非组件实例，需要修正：

// 原代码
setTimeout(function () {
    _this.callHttp();
    this.loadDone = true; // 这里this指向错误
}, 5000);

// 修改后
setTimeout(() => {
    _this.callHttp();
    _this.loadDone = true; // 使用_this指向组件实例
}, 5000);

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