禁用@click事件Vuejs 2

Question

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

1. 用户不能跳过，所以@click事件到正确的项目应该被禁用。
2. 只有@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; 
}