CODEWITHSUNDEEP
jqueryvue.jsvuejs2
claudios
claudios

Reputation: 6656

Disable @click event Vuejs 2

I have a custom table that serves as a progress bar and added @click events on each td that will redirect to a specific page. Now, the behavior should be like this:

  1. User can't skip forward so the @click event to the right items should be disabled.
  2. Only @click event functions when going back.

Template:

<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>

Script:

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"
            }
        }

Upvotes: 0

Views: 3986

Answers (1)

Nora
Nora

Reputation: 3261

You will need to implement some logic to check if navigation steps are active or not. Here is a suggestion:

List of steps:

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,
            }
        }
    }
}

A generic go to next step function:

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

And a function to check if step that you want to go to is active:

function checkDependanciesCompletion(dependencies) {
    let isCompleted = true;

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

    return isCompleted;
}

Upvotes: 1

Related Questions