禁用@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; 
}