Question

我有一个自定义表格作为进度条，并在每个@click上添加了td个重定向到特定页面的事件。现在，行为应该是这样的：

用户无法向前跳过，因此应禁用@click事件到正确的项目。
返回时只有@click个事件功能。

模板：

<tr>
     <td class="circle col-xs-2 col-xs-offset-1"
             @click="goRelationship">Relationship</td>
     <td class="circle col-xs-2"
             @click="goSkills">Skills</td>
     <td class="circle col-xs-2"
             @click="goPurpose">Purpose</td>
     <td class="circle col-xs-2"
             @click="goFit">Fit</td>
     <td class="circle col-xs-2">Submit</td>
 </tr>

脚本：

methods: {
            goRelationship: function () {
                window.location.href = "/v2/review/relationship"
            },
            goSkills: function () {
                window.location.href = "/v2/review/skills"
            },
            goFit: function () {
                window.location.href = "/v2/review/fit"
            },
            goPurpose: function () {
                window.location.href = "/v2/review/purpose"
            }
        }

Answer 1

您需要实施一些逻辑来检查导航步骤是否有效。这是一个建议：

步骤列表：

data() {
    return {
        steps: {
            relationship: {
                dependancies: [],
                completed: false,
            },
            skills: {
                dependancies: ['relationship'],
                completed: false,
            },
            fit: {
                dependancies: ['relationship', 'skills'],
                completed: false,
            },
            purpose: {
                dependancies: ['relationship', 'skills', 'fit'],
                completed: false,
            }
        }
    }
}

通用转到下一步功能：

goToStep(stepName) {
    if (checkDependanciesCompletion(this.steps[stepName].dependancies)) {
        window.location.href = `/v2/review/${stepName}`
    }
}

一个检查你想要去的步骤是否有效的功能：

function checkDependanciesCompletion(dependencies) {
    let isCompleted = true;

    dependencies.forEach((dep) => {
        if (!this.steps[dep].completed) {
            isCompleted = false;
        }
    });

    return isCompleted;
}

禁用@click事件Vuejs 2

1 个答案: