Vue Bootstrap - 我需要单击两次才能打开下一个选项卡

Question

我有这个 Vue JS 选项卡：

<b-tabs v-model="tabIndex">
    <b-tab title="Settings">
        <validation-observer ref="validateSetting" tag="form">
            my htmlform......
            <b-button variant="primary" type="submit" @click.prevent="validateSetting"> Next </b-button>
        </validation-observer>
    </b-tab>
    <b-tab title="Edit Mapping" :disabled="mapingDisabled">
        <validation-observer ref="validateEditMapping" tag="form">
            my htmlform......
            <b-button variant="primary" type="submit" @click.prevent="validateEditMapping"> Next Steps </b-button>
        </validation-observer>
    </b-tab>
    <b-tab title="Safety" :disabled="safetyDisable">
        <b-button variant="primary" type="submit" @click.prevent="submitXml" > Submit </b-button>
    </b-tab>
</b-tabs>

每个选项卡都包含使用validation-observer 验证的 HTML 表单，这意味着用户在当前选项卡验证完成之前无法转到下一个选项卡。

在第二个和第三个，我使用:disabled="mapingDisabled" 和:disabled="safetyDisable" 禁用了它。

现在，如果我点击第一个标签的 按钮，它不会立即转到第二个标签！ 我必须再次点击才能转到第二个等等...为什么？

这是我在脚本部分使用的内容：

在数据属性上我有这 2 个属性：

mapingDisabled: true,
safetyDisable: true,
tabIndex: 1,

及方法：

validateSetting() {
    this.$refs.validateSetting.validate().then((success) => {                       
        if (success) {
            this.mapingDisabled = false;
            this.tabIndex++;
            let _this = this;
            if (this.countHTTP == 0) {
                this.callHttp();
                this.countHTTP++;
            }
        }
    });
},
callHttp() {
    let importData = {
        token: this.mappingData.token,
        xml_file_url: this.mappingData.xml_file_url,
        name: this.mappingData.mapping_name,
        encoding : this.mappingData.encoding,
    };
    http.post("projects/import/", importData)
        .then((response) => {
            let res = response.data;
            let _this = this;

            if (res.status !== 1) {
                setTimeout(function () {
                    _this.callHttp();
                    this.loadDone = true;
                }, 5000);
            } else if (res.status === 1) {
                this.loadDone = false;
                this.mappingData.id_feed = res.id_feed;
                res.field_names.forEach(function (item, index) {
                    _this.mappingData.projectFieldOptions.push({
                        value: item,
                        text: item,
                        custom: false,
                    });
                });
            }
        })
        .catch((error) => {
            console.log(error);
        });
},
validateEditMapping() {
    this.$refs.validateEditMapping.validate().then((success) => {
        if (success) {
            this.tabIndex++;
            this.safetyDisable = false;
        }
    });
},
submitXml() {
    http.post("projects/import/mapping/", this.mappingData)
        .then((response) => {
            for (const prop of Object.getOwnPropertyNames(this.mappingData)) {
                delete this.mappingData[prop];
            }
            this.$bvModal.hide("import-xml-modal");
        })
        .catch((error) => {
            console.log(error);
        });
},

Answer 1

我认为是“this.tabIndex++;”应该是"this.tabIndex += 1;"。但是我没有测试过，你可以试试。